看到网页中的图片当鼠标移动到图片上时（鼠标悬停在图片上）图片变灰，看似变色变灰效果，实际是图片被CSS设置为半透明样式。

原理：

  • filter 设置IE8之前浏览器半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用方法
  • opacity 设置非IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用方法
  • -moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同。
<!-- HTML代码 -->
<div class="htmleaf-content bgcolor-3">
 　<div class="opc1"><a href="#"><img src="images/pic1.jpg" /></a></div> 
 　<div class="opc2"><a href="#"><img src="images/pic2.jpg" /></a></div>
</div>

/*CSS代码*/
.opc1 a img,.opc2 a img{ width:300px; margin:20px auto}
.opc1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.opc2 a:hover img{filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5}
<!-- 完整源码 -->
<!DOCTYPE html> 
<html> 
 　<head>
 　　<meta charset="UTF-8"/>
 　　<title>CSS实现鼠标经过图片变透明</title> 
 　　<style>
 　　　.opc1 a img,.opc2 a img{ width:300px; margin:20px auto} 
 　　　.opc1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} 
 　　　.opc2 a:hover img{filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5} 
 　　</style>
 　</head> 
 　<body> 
 　　<h3>css 鼠标经过图片，图片变色变暗透明</h3> 
 　　<div class="opc1"><a href="#"><img src="images/pic1.jpg" /></a></div> 
 　　<div class="opc2"><a href="#"><img src="images/pic2.jpg" /></a></div>
 　</body> 
</html>

[demo]http://demo.skillcat.cn/css-css3/css-images-opacity/index.html[/demo]

赏

技术成就梦想，细节成就品质。