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 相关文章推荐
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php使用codebase生成随机数
2014/03/25 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php技巧小结【推荐】
2017/01/19 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript smipleChart 简单图标类
2011/01/12 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
Javascript实现秒表计时游戏
2020/05/27 Javascript
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
Python图像读写方法对比
2020/11/16 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
大学生党员批评与自我批评
2014/09/28 职场文书
2014年少先队工作总结
2014/12/03 职场文书
就业意向协议书
2015/01/29 职场文书
限期整改通知书
2015/04/22 职场文书
色戒观后感
2015/06/12 职场文书
小学庆六一主持词
2015/06/30 职场文书
高一军训感想
2015/08/07 职场文书