2023年7月19日发(作者：)

背景图⽚hover加蒙层_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() no-repeat center center;background-size: cover;z-index: -1;}⽅法⼆：通过伪类元素叠加.wrap2 {position: relative;width: 1200px;height: 400px;background: url() 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() rgba(0, 0, 0, .5) no-repeat center center;background-blend-mode: multiply;}拓展：背景模糊加颜⾊叠加.wrap4 {position: relative;width: 1200px;height: 400px;background: url() rgba(0, 0, 0, .5) no-repeat center center;background-blend-mode: multiply;filter: blur(2px);overflow: hidden;}总结以上所述是⼩编给⼤家介绍的css3给背景图⽚加颜⾊遮罩的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！