前端遮罩层实现_css遮罩层怎么做？
现在⼤部分的⽹站，在我们点开⼀些活动页⾯是都会弹出⼀个类似领取红包，奖品等活动信息。也就是⼀个遮罩层，⽽实际上这遮罩层就是由简单的css来实现的。下⾯我们来看⼀下css如何做遮罩层。
css使⽤可以使⽤opacity属性或rgba属性来实现遮罩层。通过css设置两个容器在同⼀位置，然后使⽤css设置其中⼀个容器透明度即可实现遮罩层。
css做遮罩层⽰例：
先看下我们的html，很简单，⼀个img图⽚控件，和⼀个有mask样式的div，⾥⾯有⽂字，这个就是遮罩层。
然后看下样式定义，先看下图⽚容器和图⽚的样式，如图，其中要注意的是img_container样式⾥定义了position: relative；这个主要是为了让我们的遮罩层做绝对定位做准备的。
再看下遮罩层的样式定义，代码如图，其中需要注意的是他的定位样式，我们设置了absolute的绝对定位，另外还有半透明的background 样式设置：background: rgba(0, 0, 0, 0.7);css怎么创建
可以通过修改后⾯的0.7这个数字来改变透明度。1为完全不透明，0为完全透明。
接着添加⿏标移动上去显⽰遮罩层的脚本代码。这个js代码⽤jquery来写，⽅便，简单⼀点，所以我们先引⼊jquery脚本库。
添加mouseover，mouseout事件，主要就是当⿏标移动到图⽚容器上时，显⽰遮罩层，移出时，隐藏遮罩层。代码如图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。