css实现渐变图片——曲线救国解决笔记

遇到的问题：
最近项目里面会用到一张图片渐变过渡到透明的样式，身为小小菜鸡的我就去网上百度了一系列的样式，但是都没有说到可以让一张图片从不透明到透明，那我就开始慌了呀~~~~~~~~~~~~

解决问题：
我就想到了，用一张图片叠加渐变纯色的效果，渐变到与背景色一致，这样也是可以曲线救国，实现这个效果的，说干就干，直接贴🐎

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body {
        margin: 0;
      }
      .coverbg {
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        height: 131px;
        width: 130px;
        position: absolute;
        top: 0;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="测试图片.png" />
      <div class="coverbg"></div>
    </div>
  </body>
</html>

最后的效果就是这样子， 就是渐变色和背景色融合，看上去是由图片渐变到了透明 ，实际情况和样式还是按照项目的要求来

 

 好了，最后，这里依然爱你们

 

posted @ 2021-07-09 16:24  蒋大楠  阅读(174)  评论(0)    收藏  举报