CSS的图片设置两端渐变
CSS的图片设置两端渐变
<html>
<div class="bg-old">原图</div>
<div class="bg-new">效果图</div>
</html>
<style>
.bg-old{
width: 500px;
height: 50px;
margin-top: 20px;
background: url("/imgs/2022/01/15abe5a839988b5f.jpg");
}
.bg-new{
width: 500px;
height: 50px;
margin-top: 20px;
background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%), url('/imgs/2022/01/15abe5a839988b5f.jpg') no-repeat;
}
</style>
结果