详细解释如何给背景图片添加颜色蒙版
时间：2023-04-02 18:43:39
HTML
前段时间，在开发的时候遇到一个项目，需要给背景层添加颜色遮罩。下面具体总结下给背景层添加颜色遮罩的方法。方法一：定位叠加（注意层次）
.wrap1{position:relative;宽度：1200px；高度：400px；背景：rgba(0,0,0,.5);}.wrap1.inner{位置：绝对；左：0；右：0；顶部：0；底部：0；背景：url(ban8.jpg)无重复中心center；背景尺寸：封面；z-index:-1;}方法二：叠加
.wrap2{position:relative;宽度：1200px；高度：400px；背景：url(ban8.jpg)无重复中心center；背景大小：封面；}.wrap2::before{内容：“”；位置：绝对；左：0；右：0；底部：0；顶部：0；背景色：rgba(0,0,0,.5);z-index:2;}方法三：CSS3颜色叠加background-blend-mode:multiply;(乘法)
.wrap3{position:relative;宽度：1200px；高度：400px；背景：url(ban8.jpg)rgba(0,0,0,.5)无重复中心center;background-blend-mode:multiply;}Expansion:backgroundblurpluscoloroverlay.wrap4{位置：相对;宽度：1200px；高度：400px；背景：url(ban8.jpg)rgba(0,0,0,.5)no-repeatcenter中心；背景混合模式：相乘；滤镜：模糊（2px）；overflow:hidden;}as有什么问题欢迎大家讨论和指出。如果有更好的方法，请告诉我，谢谢~~
