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

最新推荐文章于 2024-02-16 23:40:45 发布

蒋大楠

最新推荐文章于 2024-02-16 23:40:45 发布

阅读量215

点赞数 2

分类专栏：样式 h5 文章标签： html css

本文链接：https://blog.csdn.net/weixin_51973859/article/details/118605637

版权

样式同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

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>

最后的效果就是这样子，就是渐变色和背景色融合，看上去是由图片渐变到了透明，实际情况和样式还是按照项目的要求来
在这里插入图片描述
~~好了，最后，爱你们~~

蒋大楠

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css实现渐变图片——曲线救国解决笔记

css实现渐变图片——曲线救国解决笔记遇到的问题：最近项目里面会用到一张图片渐变过渡到透明的样式，身为小小菜鸡的我就去网上百度了一系列的样式，但是都没有说到可以让一张图片从不透明到透明，那我就开始慌了呀~~~~~~~~~~~~解决问题：我就想到了，用一张图片叠加渐变纯色的效果，渐变到与背景色一致，这样也是可以曲线救国，实现这个效果的，说干就干，直接贴????<!DOCTYPE html><html> <head> <meta charset=
复制链接

扫一扫