CSS3 如何给背景图片加颜色遮罩? 下面本篇文章给大家介绍一下 css3 给背景图片加颜色遮罩的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在开发中, 有时遇到需要给背景层加颜色遮罩的项目, 现在特定总结一下给背景图层加颜色遮罩的方法.
方法一: 通过定位叠加 (注意层级)
- <p class="wrap1">
- <p class="inner"> </p>
- </p>
- .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;
- }
方法二: 通过伪类元素叠加
- <p class="wrap2"></p>
- .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;(正片叠底)
- <p class="wrap3"></p>
- .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;
- }
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/17536.html