css3给背景图片加颜色遮罩的方法

前段时间在开发中，遇到需要给背景层加颜⾊遮罩的项⽬，现在特定总结⼀下给背景图层加颜⾊遮罩的⽅法。

⽅法⼀：通过定位叠加(注意层级)

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;}

⽅法⼆：通过伪类元素叠加

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;(正⽚叠底)

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给背景图⽚加颜⾊遮罩的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！