看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被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.me/css-css3/css-images-opacity/index.html[/demo]


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