前段时间在开发中, 遇到需要给背景层加颜色遮罩的项目, 现在特定总结一下给背景图层加颜色遮罩的方法.
方法一: 通过定位叠加 (注意层级)
- <div class="wrap1">
- <div class="inner"> </div>
- </div>
- .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;
- }
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
方法二: 通过伪类元素叠加
- <div class="wrap2"></div>
- .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;(正片叠底)
- <div class="wrap3"></div>
- .wrap3 {
- position: relative;
- width: 1200px;
- height: 400px;
- background: url(ban8.jpg) rgba(0, 0, 0, .5) no-repeat center center;
- background-blend-mode: multiply;
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
拓展: 背景模糊加颜色叠加
- .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;
- }
来源: http://www.jianshu.com/p/79dc64c06d37