CSS實(shí)現(xiàn)鼠標(biāo)指針移上時(shí)圖片漸變的效果

2012/11/26 12:33:14作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

圖片是文本的解釋和說(shuō)明，在網(wǎng)頁(yè)中適當(dāng)?shù)奈恢梅胖靡恍﹫D片，不僅可以使文本更容易閱讀，而且可以使網(wǎng)頁(yè)更具有吸引力。

【實(shí)例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.5;}
.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;}
</style>
</head>
<body class="highlightit">
<table width="85%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="highlightit"><img src="images/11.jpg" width="560" height="483" /></td>
</tr>
</table>
</body>
</html>

【代碼分析】

在代碼中，加粗部分的代碼標(biāo)簽是設(shè)置鼠標(biāo)指針移上時(shí)圖片漸變的效果，如圖所示。

鼠標(biāo)指針移上時(shí)圖片漸變的效果運(yùn)行效果