前段时间在开发中,遇到需要给背景层加颜⾊遮罩的项⽬,现在特定总结⼀下给背景图层加颜⾊遮罩的⽅法。
⽅法⼀:通过定位叠加(注意层级)
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给背景图⽚加颜⾊遮罩的⽅法,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!如果你觉得本⽂对你有帮助,欢迎转载,烦请注明出处,谢谢!
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- huatuo0.com 版权所有 湘ICP备2023021991号-1
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务