文字超出容器滚动，到底部显示虚化效果

文字滚动到底部虚化效果

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