这有CSS3才有过滤镜 的。用法：
img{
opacity:0.4
filter:alpha(opacity=40) /* 针对 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0
filter:alpha(opacity=100) /* 针对 IE8 以及更早的版本 */
}
用CSS的滤镜效果来制作的渐变色效果。【所谓渐变色，就是指定一个开始颜色，指定一个结束颜色，整个背景便从左到右由开始颜色向结束颜色逐渐变化，整个背景的颜色是动态连续的，越接近右边其颜色就越接近结束颜色，越远离开始颜色，是一种常用的网页用css的透明滤镜,alpha 然后 给图片加上 onmouseover 和 onmouseout 属性, onmouseover事件的响应函数里面把img的class更改onmouseout事件的响应函数里面把img的class改为透明滤镜就可以了.http://zhidao.baidu.com/question/1039537.html
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<title></title>
<style type="text/css">
#all{border: 1px solid #BFBFBFwidth: 500pxheight: 200pxposition: relativetop: 100pxmargin: 0 auto}
li{list-style: nonewidth: 120pxheight: 120pxbackground: #000000float: leftmargin-left: 5pxtext-align: centercolor: #FFFFFFfont-size: 20px}
li:hover{opacity: 0.5}
</style>
</head>
<body>
<div id="all">
<ul>
<li>我是猪</li>
<li>我是猪</li>
<li>我是猪</li>
</ul>
</div>
</body>
</html>
所谓的滤镜就是改变透明度而已，如果是在css中来写，就是直接给你要改变的标签设置透明度属性，如果是js，那就添加动画改变透明度，可以做出很多很炫的效果。
