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

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

5、第五步：继续编写两个ｄｉｖ标签的样式。鼠标移动到图片上就会出现蒙版。<style t鲻戟缒男ype="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>

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