如何用CSS实现滚动时固定于容器底部的背景渐变效果？

我想询问是否可以使用CSS实现类似“清除”元素背景的效果，以下是一个大致符合需求的示例：

原示例CSS代码 #

.background {
  width: 150px; 
  height: 150px; 
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png');
  display: fixed;
  padding: '16px';
  overflow: auto;
}

.container {
  display: fixed;
  width: 100%;
  height: 100%;
}

.item {
  height: 35px;
  background-color: rgba(255,255,255,0.5);
  margin: 12px;
}

.item-gradient {
  height: 35px;
  margin: 12px;
  background-image: linear-gradient(rgba(255,255,255,0.5), transparent);
}

原示例HTML代码 #

<div class="background">
  <div class="container">
    <div class="item">
      item #1
    </div>
    <div class="item">
      item #2
    </div>
    <div class="item-gradient">
      item #3
    </div>
    <div class="item">
      item #4
    </div>
    <div class="item">
      item #5
    </div>
    <div class="item">
      item #6
    </div>
  </div>
</div>

在上述示例中，我直接给最后一个列表项添加了渐变，但希望滚动列表项时，该渐变始终停留在容器底部，而非随列表项滚动。请问仅使用CSS可以实现该效果吗？

补充说明：附上参考动图

我希望容器底部有一个固定的背景渐变遮罩，不会随列表内容滚动。

解决方案 #

可以实现，无需给列表项绑定渐变，只需给带滚动的容器添加伪元素作为固定遮罩，具体调整如下：

调整后的CSS代码 #

.background {
  width: 150px; 
  height: 150px; 
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png');
  position: relative; /* 修正原错误写法，fixed是position属性值而非display */
  padding: 16px; /* 移除不必要的引号 */
  overflow: auto;
}

.container {
  width: 100%;
}

.item {
  height: 35px;
  background-color: rgba(255,255,255,0.5);
  margin: 12px;
}

/* 添加固定在容器底部的渐变遮罩 */
.background::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px; /* 与列表项高度保持一致 */
  background-image: linear-gradient(rgba(255,255,255,0.5), transparent);
  pointer-events: none; /* 避免遮罩阻挡列表项的交互 */
}

调整后的HTML代码 #

<div class="background">
  <div class="container">
    <div class="item">
      item #1
    </div>
    <div class="item">
      item #2
    </div>
    <div class="item">
      item #3
    </div>
    <div class="item">
      item #4
    </div>
    <div class="item">
      item #5
    </div>
    <div class="item">
      item #6
    </div>
  </div>
</div>

实现原理 #

1. 修正原代码错误：display: fixed是无效写法，改为position: relative；移除padding属性值的多余引号。
2. 利用容器的::after伪元素创建遮罩，通过position: sticky + bottom: 0实现遮罩固定在容器底部。
3. 设置pointer-events: none，确保遮罩不会干扰下方列表项的点击等交互行为。
4. 移除原有的.item-gradient类，统一列表项样式，避免渐变随列表滚动。

这样滚动列表内容时，渐变遮罩会始终停留在容器底部，不会随内容移动。

内容的提问来源于stack exchange，提问作者manu