当前位置:首页 > 前端技术 > CSS 给图片或背景图片加颜色遮罩

CSS 给图片或背景图片加颜色遮罩

2022年11月09日 21:34:36前端技术6

一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背景颜色,介绍两种方法:

第一种,代码如下:

css:
.wrap{
    position: relative;
    background: url(i/pic4.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.warp-mask{
    height:100%;
    width:100%;
    background: rgba(0,0,0,.4);
}
html:
<div class="wrap">
    <div class="wrap-mask"></div>
</div>

 

第二种,通过after伪元素设置,代码如下:

css:
.wrap{
    position: relative;
    background: url(i/pic4.jpg) no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.wrap-mask:after{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-color: yellow;
    opacity: 0.2;
    z-index: 1;
    width: 100%;
    height: 100%;
}
html:
<div class="wrap">
    <div class="wrap-mask"></div>
</div>

 

 

https://blog.csdn.net/mr_fzz/article/details/53219367

作者:格鲁特baby
来源链接:https://www.cnblogs.com/grootbaby/p/13827970.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69231.html

标签: css
分享给朋友:

“CSS 给图片或背景图片加颜色遮罩” 的相关文章

Web都会的CSS总结(回顾必备)

目录 选择器 background(背景) font(字体样式) 文本格式化 链接样式 border(边框样式) table(表格样式) list-style(列表样式) margin(外边距) padding(...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

html常用标签以及css基本属性和选择器

html常用标签 一般格式为: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...

修改nui-app中rich-text富文本内容的css样式

如何修改rich-text富文本内容的css样式 以图片举例: 我们可以使用正则匹配的方式为富文本的标签加上类名: 富文本渲染数据.replace(/\<img/gi, '<img class="richImg"'); 然...

css font属性详解

一、字体属性         1、字体             属性:font-family     ...

CSS中的Position属性

CSS中的Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解。 1、简介 position有五个属性: static | relative | absolute | fixed | inheri...

html中css字体颜色代码大全,css字体颜色的设置方法

html中css字体颜色代码大全,css字体颜色的设置方法

css字体颜色的设置方法:首先创建一个HTML示例文件;然后在body定义一些p标签并在p标签中输入文字内容;最后给p标签添加css样式为“p{color: blue}”即可修改字体颜色。 本文操作环境:windows7系统、HTML5&am...

CSS中的table标签的圆角

在CSS中如果给table标签加了border-collapse属性的话想要在给table添加 border-radius是无效果的,发生冲突 作者:沙漠驼舟 来源链接:https://blog.csdn.net/syl28502...

html中怎样给svg文件改变颜色,通过CSS改变svg image引入的图片颜色?

在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果。很不错的方法。 但是我现在的元素是在svg中,即图片的引入是通过image元素xlink:href来引入图...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。