文字滚动到底部虚化效果
HTML
<div class="a">
<div class="b"></div>
<div class="c">
<p>
1. 效果：文字超出容器滚动，滚动到底部有个虚化的效果。
</p>
<p>
2.实现思路：父级容器包含2个子容器：内容div和负责虚化的div块，这个块可以理解为一个局部遮罩层
</p>
<p>
3. 利用css3的backround-image属性的linear-gradient实现渐变效果，因为文字背景色是白色，所以简渐变的颜色全都选择白色，rgba最后一个参数设置0为完全透明。
4.渐变有很多属性和方法可自行学习，此段代码简单实现如上效果。
</p>
</div>
</div>
CSS
.a{
width:200px;
height:300px;
border:1px solid black;
overflow:scroll;
position:relative;
}
.b{
position: absolute;
bottom: 0;
width:200px;
height:50px;
background-image:linear-gradient(rgba(255,255,255,0.00) 0%,#ffffff 56%);
}
.c{
width:200px;
height:300px;
overflow:scroll;
}
效果
不方便录屏就大概看下效果。
image.png
