淡化底部文本，同时使用线性渐变向下滚动

Question

我有新闻文章列表，因此用户知道底部有一些文字。我是如何尝试的style="background: linear-gradient(360deg, rgba(135, 135, 135, 0) 0%, #878787 20%)"

但我没有得到我想要达到的目标。

这是我想要的屏幕

现在我变得像这样

Answer 1

只需将其应用于.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; }伪元素即可。我创建了一个片段来说明。创建一个包含relative和:: after的包装器，以及滚动层和文章内部。很简单。

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

--header

Answer 2

您只需更新.scss文件，如：

  .item-md{
    background: #878787;
    padding-right:15px !important;
    color: #fff !important;
  }

我认为它解决了你的问题