前端遮罩层实现_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);

可以通过修改后面的0.7这个数字来改变透明度。1为完全不透明，0为完全透明。

接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写，方便，简单一点，所以我们先引入jquery脚本库。

添加mouseover，mouseout事件，主要就是当鼠标移动到图片容器上时，显示遮罩层，移出时，隐藏遮罩层。代码如图

前端遮罩层实现_css遮罩层怎么做？相关推荐

element-UI 弹出组件dialog的遮罩层在弹出层的上面 - 解决篇
element-UI 弹出组件的遮罩层在弹出层dialog模态框的上面? bug演示: 代码逻辑调整之后,页面就正常了(代码和效果图 · 见下文): 解决办法: 将dialog组件剪贴到最父级div元 ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
unity新动画系统之动画层和动画遮罩
这一节来说说unity动画层layer和遮罩avatarMask: weight 权重,对应着这一层动画在所有层动画中所占的比例.以上图来说明,new layer中的weight为0,模型的动画效果就 ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
遮罩层与被遮罩层的闪烁问题
目录在一个盒子上设置一个遮罩层时出现的闪烁问题:即遮罩层与被遮罩层交替显示问题被遮罩层: 遮罩层: 原因在于: 解决方法可以为: 在一个盒子上设置一个遮罩层时出现的闪烁问题:即遮罩层与被遮罩层交替 ...
css叠层_css z-index层重叠顺序
div css z-index层重叠顺序 DIV层.span层等html标签层重叠顺序样式z-index,平时我们使用较少,但也会难免会碰到CSSz-index使用.接下来divcss5介绍z-ind ...
html遮罩底下的不动,AE做遮罩，如何让遮罩不动，底下的素材动？
回答: 这要分为俩个情况,一是素材不动,遮罩动:二是素材动,遮罩不动. 第一种情况: 1. 点击1处的码表(字前面的小圆圈) 2. 将1的时间轴移到任意位置,然后双击2的遮罩点 3. 拖动圆圈至任意位 ...
MyBatis知多少（6）表现层与业务逻辑层
表现层表现层负责向最终用户展示应用程序的控制方式以及数据.它还要负责所有信息的布局和格式.今天,商业应用程序最流行的表现方式应该算是Web前端了,它使用HTML和JavaScript并通过Web浏 ...
深度之眼Pytorch打卡（十三）：Pytorch全连接神经网络部件——线性层、非线性激活层与Dropout层（即全连接层、常用激活函数与失活）
前言无论是做分类还是做回归,都主要包括数据.模型.损失函数和优化器四个部分.数据部分在上一篇笔记中已经基本完结,从这篇笔记开始,将学习深度学习模型.全连接网络MLP是最简单.最好理解的神经网络, ...

前端遮罩层实现_css遮罩层怎么做？

前端遮罩层实现_css遮罩层怎么做？相关推荐

最新文章

热门文章