淡化底部文本，同时使用线性渐变向下滚动 [英] Fade bottom text while scroll to down with linear gradient

问题描述

我有新闻文章列表，因此用户知道底部有一些文字。我是怎么尝试这样的 style =background：linear-gradient（360deg，rgba（135,135,135,0）0％，＃878787 20％）

I have list of news articles so user know that there is some text in bottom. How i tried like this style="background: linear-gradient(360deg, rgba(135, 135, 135, 0) 0%, #878787 20%)"

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

but i am not getting what i want to achieve.

这是我想要的屏幕

现在我变得像这样

推荐答案

只需申请它在 :: after 伪元素之后。我创建了一个片段来说明。创建一个包含relative和:: after的包装器，以及滚动层和文章内部。很简单。

Just apply it on an ::after pseudoelement. I create a snippet to illustrate. Create a wrapper with relative and ::after on it, and inside the scroll layer and the articles. Just easy.

.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>

这篇关于淡化底部文本，同时使用线性渐变向下滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！