css div颜色渐变效果

  • Post author:
  • Post category:其他




文字透明度随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
    }



版权声明:本文为qq_44848723原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。