CSS鼠标懸停圖片上圖片變灰 變色 半透明

看到網頁中(zhōng)的圖片當鼠标移動到圖片上時（鼠标懸停在圖片上）圖片變灰，看似變色變灰效果，實際是圖片被CSS設置爲半透明樣式。href="20170711122112.html"

關鍵CSS代碼：
a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

此CSS代碼作用，設置鼠标移動到A超鏈接時，超鏈接内圖片（img）呈現半透明顯示80%效果。

解釋：
filter 設置平台IE半透明效果樣式，值1-100，值越小(xiǎo)越透明，設置IE8以前的透明使用
opacity 設置IE半透明效果樣式，值0.1-1，值越小(xiǎo)越透明，設置IE8以後版本的透明使用
-moz-opacity 對非IE浏覽器設置，比如火(huǒ)狐，語法與IE相同

此設置CSS樣式opacity、filter在IE6中(zhōng)不支持，因爲現在IE6版本占有急劇下(xià)滑，所以一(yī)般不考慮IE6對此CSS的支持。

-------------------------------------------------------------------------------------

鼠标移動到圖片變色，圖片半透明實例 ：

實例案例描述：設置兩個DIV盒子，兩個盒子分(fēn)别放(fàng)入一(yī)張圖，通過對其設置鼠标懸停(:hover)時圖片半透明爲80%和70%，觀察其效果。

1、關鍵CSS代碼

.div1{ width:500px; height:500px;}
.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}

這裏設置了對DIV對象盒子裏的超鏈接内圖片設置hover僞類半透明效果。

2、關鍵HTML代碼

<p>鼠标移動到圖片懸停時，圖片變色濾鏡效果：</p>

<div class="div1"><a href="#"><img src="images/1.png" /></a></div>