css渐变透明

在写网页内容时，需要对图片进行 css 渐变透明，实践了一下，css渐变透明代码如下

 

<div style="position: relative;">

    <!--这里是背景图-->

  <div>

    <img src="https://www.forasp.cn/images/ad.gif">

  </div>

    <!--这里是覆盖 渐变层，-->

  <div style="position: absolute;top: 0px;width: 100%;height: 100%;background-image:

        linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));">

  </div>

    <!--最顶层-->

  <div  style="position: absolute;top: 50%;transform:translateY(-70%);width: 100%;height: auto;display: flex;

        flex-direction: column;z-index: 2;background-color: transparent;text-align: left">

   这里是图层上的内容

  </div>

</div>

 

以上就是css实现渐变透明 的代码

点击这里  查看css渐变透明

 

还有网上找了一个 文字css渐变 颜色

点击这里 查看文字css渐变颜色