css实现基本的鼠标滑过图片添加遮蔽层效果

一个非常常用的效果

实现的基本思想：

（1）把要显示的div的定位设置为相对定位

（2）把要覆盖在上面的一层设置为绝对定位，通过rgba()来设置背景色及透明度

先将不透明级别(opicaty)设置为0。同时设置渐变的时间。

（3）为显示的div添加hover伪类，鼠标滑过时，将覆盖层的opiacty设置为1。

贴代码：

html:

 href="css/style.css" rel="stylesheet" type="text/css" media="all" />