网页设计怎么制作鼠标放到图片上会出现蒙版效果

1、第一步：为了实现这种效果，我们需要写两个ｄｉｖ布局标签。一个显示图片，一个用作蒙版。<div id="image" class="">　　<div id="mb" class=""></div></div>

2、第二步：将图片插入到第一个ｄｉｖ标签中。既添加＜ｉｍａｇｅ＞标签。<div id="image" class=""> <img src="C:/Users/Administrator.SC-201909092242/Desktop/无标题.jpg" width="600" height="400">　　　<div id="mb" class=""> </div></div>

3、第三步：编写第二个ｄｉｖ标签的宽和高使其和图片的宽高一致。并设置其半透明状态。<style type="text/css"> #image{ width:600px; height:400px;} #mb{ width:600px; height:400px; background:#ff6666;opacity:0.8;}</style>

4、第四步：设置两个ｄｉｖ标签的属性，ｐｏｓｉｔｉｏｎ。#image{ width:600px; height:400px; position:relative;} #mb{ width:600px; height:400px; background:#ff6666;opacity:0.8; position:absolute; top:0;left:0;}

5、第五步：继续编写两个ｄｉｖ标签的样式。鼠标移动到图片上就会出现蒙版。<style type="text/css"> *{margin:0;padding:0;} #image{ width:600px; height:400px; position:relative;} #mb{ width:600px; height:400px; background:#ff6666;opacity:0.8; position:absolute; top:0;left:0; display:none;font-size:30px; line-height:400px;text-align:center; } #image:hover #mb{display:block;} </style>

6、第六步：此时，在浏览器中进行浏览就可看到，鼠标放到图片上就会出现蒙版层。

7、总结：１首先打开网页设计软件新建或者打开一个ＨＴＭＬ文件２编写两个ｄｉｖ标签３设置ｄｉｖ标签的ｐｏｓｉｔｉｏｎ属性４设置鼠标移动上去的ｈｏｖｅｒ属性５设置完成即可实现蒙版效果