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


Posted in HTML / CSS onNovember 05, 2019

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

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

方法一:通过定位叠加(注意层级)

<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;
}

方法二:通过伪类元素叠加

<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;
}

拓展:背景模糊加颜色叠加

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

.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给背景图片加颜色遮罩的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
 

HTML / CSS 相关文章推荐
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
CSS3 边框效果
Nov 04 #HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 #HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 #HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 #HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 #HTML / CSS
CSS3 @media的基本用法总结
Sep 10 #HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 #HTML / CSS
You might like
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
python自动安装pip
2014/04/24 Python
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python 自动去除空行的实例
2018/07/24 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python request操作步骤及代码实例
2020/04/13 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
土地租赁协议书
2015/01/29 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers