HTML如何實現鼠標移動懸停在圖片上圖片變色或半透明效果

本篇內容介紹了“HTML如何實現鼠標移動懸停在圖片上圖片變色或半透明效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、CSS5先容與說明：

看到網頁中的圖片當鼠標挪動到圖片上時（鼠標懸停在圖片上）圖片變灰，看似變色變灰成就，現實是圖片被CSS設置裝備擺設為半透明花色。

二、要害CSS代碼：

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

此CSS代碼浸染，設置裝備擺設鼠標挪動到A超鏈接時，超鏈接內圖片（img）涌現半通明表示80%功效。

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

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

三、鼠標移動到圖片變色，圖片半通明實例

實例案例形容：配置兩個DIV盒子，兩個盒子離別放入一張圖，經由過程對其配置鼠標懸停(: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對象盒子里的超鏈接內圖片設置hover偽類半透明成績。

2、關頭HTML代碼

<p>鼠標移動到圖片懸停時，圖片變色濾鏡造詣：</p><div class="div1"><a href="#"><img src="images/div-a-bg.png" /></a></div><div class="div2"><a href="#"><img src="images/an.gif" /></a></div>

“HTML如何實現鼠標移動懸停在圖片上圖片變色或半透明效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！