本篇內(nèi)容介紹了“HTML如何實現(xiàn)鼠標(biāo)移動懸停在圖片上圖片變色或半透明效果”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司是專業(yè)的托克遜網(wǎng)站建設(shè)公司，托克遜接單;提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行托克遜網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

一、CSS5先容與說明：

看到網(wǎng)頁中的圖片當(dāng)鼠標(biāo)挪動到圖片上時（鼠標(biāo)懸停在圖片上）圖片變灰，看似變色變灰成就，現(xiàn)實是圖片被CSS設(shè)置裝備擺設(shè)為半透明花色。

二、要害CSS代碼：

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

此CSS代碼浸染，設(shè)置裝備擺設(shè)鼠標(biāo)挪動到A超鏈接時，超鏈接內(nèi)圖片（img）涌現(xiàn)半通明表示80%功效。

正文： filter 設(shè)置平臺IE半透明成就名目，值1-100，值越小越通明，設(shè)置IE8之前的無色應(yīng)用 opacity 配置IE半無色成績款式，值0.1-1，值越小越透明，配置IE8以后版本的通明運用 -moz-opacity 對非IE瀏覽器配置，例如火狐，語法與IE相似

此配置CSS名目opacity、filter在IE6中不支持，因為其時IE6版本盤踞急劇下滑，以是通常不考慮IE6對此CSS的支持。

三、鼠標(biāo)移動到圖片變色，圖片半通明實例

實例案例形容：配置兩個DIV盒子，兩個盒子離別放入一張圖，經(jīng)由過程對其配置鼠標(biāo)懸停(:hover)時圖片半透明為80%和70%，觀測其功效。

1、要害CSS代碼

.div1,.div2{ width:500px; margin:20px auto} .div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} .div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}

這里配置了對DIV對象盒子里的超鏈接內(nèi)圖片設(shè)置hover偽類半透明成績。

2、關(guān)頭HTML代碼

鼠標(biāo)移動到圖片懸停時，圖片變色濾鏡造詣：