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 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 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中文本操作的类
2007/03/17 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
15款jQuery分布引导插件分享
2015/02/04 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
详解jquery和vue对比
2019/04/16 jQuery
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
python提取包含关键字的整行数据方法
2018/12/11 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
django自定义模板标签过程解析
2019/12/14 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
营销总经理的岗位职责
2013/12/15 职场文书
学习保证书范文
2014/04/30 职场文书
集体生日活动方案
2014/08/18 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
劳模事迹材料范文
2014/12/24 职场文书
计算机专业自荐信
2015/03/05 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
高一军训口号
2015/12/25 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL