css添加背景图片渐变透明

最新推荐文章于 2024-04-27 21:35:02 发布

qq_40875789

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量414

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_40875789/article/details/135384595

版权

css添加背景图片渐变透明

扛着猪头敲代码

于 2023-08-11 16:47:32 发布

阅读量1.7k
收藏 4

点赞数 2
文章标签： css 前端
版权

北京城市开发者社区
文章已被社区收录
加入社区
使用场景: 在做两个元素的连接处的UI适配时，图片的颜色不能保证一定跟背景颜色或者是主色调保持一致时，会显得比较突兀。
注意：本次使用的方法只适用于背景色为纯色

正常情况下：

使用图片渐变后：

利用 background-image: linear-gradient(direction,color1,color2), url(*) (推荐)

<head>
    <style>
        .linearBg{
            background-image: linear-gradient(90deg,transparent,#fff), url(1.jpg);  // #fff表示需要兼容的底色
            width: 200px;
            height: 200px;
            background-size: 40%, contain;    // 40%表达需要渐变的宽度
            background-repeat: no-repeat; 
            background-position: right;  // right表示渐变对齐的方向
        }
    </style>
</head>
<body>
    <div class="linearBg"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
利用css伪类添加渐变透明蒙层

<head>
    <style>
        .linearBg{
              background-image:url(1.jpg);
              width:200px;
              height:200px;
              background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            &::before{
              content: '';
              position: absolute;
              top: 50%;
              right: 0%;
              width: 40%;    // 40%表达需要渐变的宽度
              height: 100%;
              transform: translateY(-50%);
              background: linear-gradient(90deg,transparent,#fff);  // #fff表示需要兼容的底色
            }
        }
    </style>
</head>
<body>
    <div class="linearBg"></div>
</body>

————————————————
版权声明：本文为CSDN博主「扛着猪头敲代码」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45333148/article/details/132235000

qq_40875789

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
css添加背景图片渐变透明

版权声明：本文为CSDN博主「扛着猪头敲代码」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_45333148/article/details/132235000。使用场景: 在做两个元素的连接处的UI适配时，图片的颜色不能保证一定跟背景颜色或者是主色调保持一致时，会显得比较突兀。于 2023-08-11 16:47:32 发布。注意：本次使用的方法只适用于背景色为纯色。文章标签： css 前端。
复制链接

扫一扫