我们常常在网页中看到这样一种效果，当你的鼠标移动到图片上的时候，图片变灰，或者变暗，这实际是图片被css设置为半透明样式。下面就给大家做一个实例看一下这种效果怎么实现
a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}此CSS代码作用，设置鼠标移动到A超链接时，超链接内图片（img）呈现半透明显示80%效果。
解释：
filter 设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用
opacity 设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用
立即学习“前端免费学习笔记（深入）”；
-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同
此设置CSS样式opacity、filter在IE6中不支持，因为现在IE6版本占有急剧下滑，所以一般不考虑IE6对此CSS的支持。
鼠标移动到图片变色，图片半透明实例
实例案例描述：设置两个DIV盒子，两个盒子分别放入一张图，通过对其设置鼠标悬停(:hover)时图片半透明为80%和70%，观察其效果。
1、关键CSS代码
wordpress主题：格子商铺主题
下载
这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果
.p1,.p2{ width:500px; margin:20px auto}
.p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。
2、关键HTML代码
鼠标移动到图片悬停时，图片变色滤镜效果：
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
