html - 淡入底部文字，同时向下滚动线性渐变

我有新闻报道清单，所以用户知道底部有一些文字。我如何尝试这样style="background: linear-gradient(360deg, rgba(135, 135, 135, 0) 0%, #878787 20%)"

但是我没有得到想要实现的目标。

这是我想要的屏幕



现在我变得这样

最佳答案

只需将其应用于::after伪元素。我创建一个片段来说明。创建一个包装，在其上有relative和:: after，并在滚动层和文章内部。只是简单。

.wrapper {
  position: relative;
}
.scroll {
  position: relative;
  height: 150px;
  overflow: auto;
}
.article {
  height: 80px;
  background: blue;
  margin: 10px;
}
.wrapper::after {
  content: " ";
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1111;
  background-image: linear-gradient(transparent, #ccc);
  height: 50px;
}

<div class="wrapper">
  <div class="scroll">
    <div class="article">a</div>
    <div class="article">b</div>
    <div class="article">c</div>
  </div>
</div>