本文介绍了淡化底部文本,同时使用线性渐变向下滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有新闻文章列表,因此用户知道底部有一些文字。我是怎么尝试这样的 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>
这篇关于淡化底部文本,同时使用线性渐变向下滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!