使用css3怎么给背景图片加颜色遮罩-创新互联
这篇文章给大家介绍使用css3怎么给背景图片加颜色遮罩，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
成都创新互联公司专注于企业
营销型网站、网站重做改版、安居网站定制设计、自适应品牌网站建设、
html5、
商城开发、集团公司官网建设、
成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为安居等各大城市提供网站开发制作服务。
方法一：通过定位叠加(注意层级)
.wrap1 {
position: relative;
width: 1200px;
height: 400px;
background: rgba(0, 0, 0, .5);
}
.wrap1 .inner {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(ban8.jpg) no-repeat center center;
background-size: cover;
z-index: -1;
}
方法二：通过伪类元素叠加
.wrap2 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) no-repeat center center;
background-size: cover;
}
.wrap2::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 2;
}
方法三：CSS3颜色叠加background-blend-mode:multiply;(正片叠底)
.wrap3 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
}
拓展：背景模糊加颜色叠加
.wrap4 {
position: relative;
width: 1200px;
height: 400px;
background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
background-blend-mode: multiply;
filter: blur(2px);
overflow: hidden;
}关于使用css3怎么给背景图片加颜色遮罩就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
文章标题：使用css3怎么给背景图片加颜色遮罩-创新互联
转载源于：
http://kswjz.com/article/dodpdd.html
