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