通过css使用background-color为背景图添加遮罩效果

wmui 发布于2019-04-23 13:32 / 2921人阅读

摘要：一个同时设置和的话，是处于层下方的，无法实现遮罩效果，所以需要再创建一个作为其子然后设置子的背景颜色，介绍两种方法第一种，代码如下第二种，通过伪元素设置，代码如下借鉴文章出处

一个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:
class="wrap">
    class="wrap-mask">

第二种，通过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:
class="wrap">
    class="wrap-mask">

借鉴文章出处：https://blog.csdn.net/mr_fzz/article/details/53219367

云服务器 GPU云服务器 html背景图添加遮罩效果 css遮罩 js遮罩效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2018.html

CSS遮罩层：hover状态丢失及解决方案

摘要：在时，亦可进一步改变该遮罩层的色彩和透明度。遮罩层实现及状态丢失问题代码代码在时，如果快速点击鼠标，可能会丢失的效果。状态丢失的简单解决方案基本思路是，点击鼠标时给添加，强制它显示里的样式。 CSS遮罩层，顾名思义就是在div上，再铺一层半透明的div。在hover时，亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。 CSS遮罩层实现及hover状态丢失问题 ...

vincent_xyb 2019-08-21 12:02 评论0 收藏0
CSS遮罩层：hover状态丢失及解决方案

摘要：在时，亦可进一步改变该遮罩层的色彩和透明度。遮罩层实现及状态丢失问题代码代码在时，如果快速点击鼠标，可能会丢失的效果。状态丢失的简单解决方案基本思路是，点击鼠标时给添加，强制它显示里的样式。 CSS遮罩层，顾名思义就是在div上，再铺一层半透明的div。在hover时，亦可进一步改变该遮罩层的色彩和透明度。我们可以通过css定位和背景色实现。 CSS遮罩层实现及hover状态丢失问题 ...

Steven 2019-08-29 13:10 评论0 收藏0
巧用CSS遮罩

摘要：用法样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。其实可以利用变色，而利用遮罩去绘制图标。遮罩透过的地方是图标的填色部分，而遮罩盖过的地方则没有颜色。 1. 用法 -webkit-mask样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像，透明度为0则不显示，介于0...

cocopeak 2019-08-29 11:03 评论0 收藏0
用原生js写出一个弹框+遮罩层的页面,完成弹框垂直居中页面且点击弹框外任何区域去掉弹框和遮罩层的功能

摘要：背景官网有个对话框组件如图如果哪天不能用框架了不能用组件了只能用原生写页面现在的我可能要一个页面写一年目标用原生完成这个页面弹框处于垂直居中状态且点击弹框外任意区域关闭弹框写了很久很久时间就不说了遇到的最难的问题就是不知道怎么关闭弹框后面还背景:Ant官网有个对话框Model组件.如图: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

betacat 2019-08-30 15:44 评论0 收藏0