半透明圖片效果,鼠標移動上去就透明,支持Firefox/IE

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.   <head> 
  5.     <title>測試一下半透明效果</title> 
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  7.     <style type="text/css"> 
  8.       body {  
  9.         background:#000;  
  10.       }  
  11.       .a {  
  12.         filter:alpha(opacity=50); /* IE */  
  13.         -moz-opacity:0.5; /* Moz + FF */  
  14.         opacity:0.5; /* 支持CSS3的瀏覽器(FF 1.5也支持)*/  
  15.       }  
  16.       .a :hover {  
  17.         filter:alpha(opacity=100); /* IE */  
  18.         -moz-opacity:1; /* Moz + FF */  
  19.         opacity:1; /* 支持CSS3的瀏覽器(FF 1.5也支持)*/  
  20.       }  
  21.     </style> 
  22.   </head> 
  23.   <body> 
  24.     <img class="a" 
  25.       src="http://www.fayaa.com/static/images/logo/snap_code.gif" alt="測試一下" 
  26.       onmouseover="this.className='b'" onmouseout="this.className='a'" /> 
  27.   </body> 
  28. </html> 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章