1.首先看看HTML、一个img图像控件和一个带掩码样式的div,其中包含文本。这是蒙版层。
2.然后,查看样式定义。首先,查看图像容器和图像的样式,如图所示。这主要是准备我们的绝对定位口罩。
3.看看蒙版层的样式定义。代码如图所示。
背景:rgba(0,0,0,0.7)
透明度可以通过修改后面的0.7号来改变。1是完全不透明的,0是完全透明的。
4.然后添加用于鼠标移动的脚本代码来显示蒙版层。这段js代码是用jquery编写的,既方便又简单,所以我们首先介绍jquery脚本库。
5.添加mouseover和mouseout事件,主要是当鼠标移动到图像容器上时显示蒙版层,当鼠标移出时隐藏蒙版层。
6.刷新页面,您可以看到页面上显示的正常图片。
7.当我们把鼠标放在蒙版层上时,蒙版层就会显示出来。
<!--遮罩层输入密码-->
<div class="dongjie" style="width: 100%height: 100%background-color: rgba(0,0,0,0.6)z-index: 11111position: fixedleft: 0top:0">
<div class="jiedon_box" style="width: 92%background: #eeeeeeheight: 4.8remposition: fixedleft: 4%top:36%z-index: 1111">
<input style="width: 80%height: 0.66remdisplay: blockmargin: automargin-top: 1rempadding-left: 0.2rem" type="password" placeholder="请输入交易密码" name="">
<div style="margin-top:0.6remmargin-left:10%overflow: hidden">
<button style="width: 2remheight: 0.66remfloat: leftbackground: #0093DDcolor: #ffffff">确定</button>
<button style="width: 2remheight: 0.66remfloat:rightmargin-right:11% ">取消</button>
</div>
</div>
</div>