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实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python中bisect的使用方法
2019/12/31 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
C#实现启动一个进程
2016/10/01 面试题
奥巴马英文演讲稿
2014/05/15 职场文书
党员批评与自我批评
2014/10/15 职场文书
杭白菊导游词
2015/02/10 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android