您好,欢迎来到华佗健康网。
搜索
您的当前位置:首页css3给背景图片加颜色遮罩的方法

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

来源:华佗健康网
css3给背景图⽚加颜⾊遮罩的⽅法

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

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

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo0.com 版权所有 湘ICP备2023021991号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务