css添加背景图片渐变透明

最新推荐文章于 2025-03-22 01:30:05 发布

扛着猪头敲代码

最新推荐文章于 2025-03-22 01:30:05 发布

阅读量5.7k

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_45333148/article/details/132235000

版权

使用场景: 在做两个元素的连接处的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>

利用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>