前端小知识（3） |
您所在的位置：网站首页 › js透明度怎么设置出来 › 前端小知识（3） |
前端小知识（3）
|
实现效果
使用mix-blend-model属性主要是用于源与背景颜色或背景图像混合。 详细介绍 图片透明度渐变 body{ padding: 0; margin: 0; } .Test{ position: relative; display: inline-block; width: 100%; background-image: linear-gradient( rgba(255,255,255,0), rgba(255,255,255,0), rgba(255,255,255,1) ); } .Test img{ mix-blend-mode: overlay; width: 100%; }
2.使用蒙版
图片透明度渐变
body{
padding: 0;
margin: 0;
}
.Test{
display: inline-block;
position: relative;
}
.Test img{
width: 100vw;
}
.Test .mengban{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: linear-gradient(
rgba(255,255,255,0),
rgba(255,255,255,0),
rgba(255,255,255,1)
);
}
对于两种实现方式：建议使用第二种方式，在笔者实现的过程中，发现第一种方法对于图片上的文字的颜色与背景色也会发生混合，但是在写博客的时候又无法复现了，可能一开始实现的过程中添加了什么不必要的属性，但是从避免踩坑的角度，也从浏览器兼容性的角度上来说，第二种方式更加适合。 |
【本文地址】