博客

文字透明度随div透明度渐变

单独给一个div设置渐变的透明度不能达成上面的效果，字的颜色不会随着透明度一起渐变，解决方法是加一个和背景颜色一样，透明度渐变的遮罩层，类似于新加一层涂料把原来的盖住的感觉，第一张图的横向渐变的遮罩层代码如下，渐变的坐标可以通过改变宽度，改变linear-gradiant的节点位置来实现

.bg-transparent{
      position: absolute;
      height: 15px;
      width: 180px;
      right: 45px;
      background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));
      background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 50%);
      z-index 999
    }