站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:站長之家 >> 網站技術 >>



站長之家提供使用濾鏡讓網頁對象半透明效果


【發布人:站長之家    發布日期:2015-03-28】

站長們在做網站界面的編碼時,有時候為讓界面更加美觀,可以使用一些CSS的特效技術,比如濾鏡技術。使用濾鏡技術可以實現網頁對象的特殊的效果。在這里,站長之家測試并提供了使用濾鏡讓網頁對象半透明效果的實例,在下面展示出來,供廣大站長們參考。本實例代碼已經在IE瀏覽器、Chrome瀏覽器和360安全瀏覽器上測試通過,可以放心使用。關于代碼中的核心部分,就是一些css樣式的定義,在樣式定義中加入濾鏡效果,本例中使用了濾鏡filter中的alpha透明度的效果,各位可以根據實例代碼的功能,修改相關的參數,從而實現其他更加美觀的界面效果。

下面就將使用濾鏡讓網頁對象半透明效果的實例代碼展示在下面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠標放圖片和鏈接上顯示濾鏡效果實例</title>

<style type="text/css">

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

</style>

</head>
<body>

<p>在鼠標移到圖片上時顯示濾鏡效果</p>
<p><img src="images/tupian.png" /></p>
<p><a href="#">站長網(www.hdfwko.tw)</a></p>

</body>
</html>

下面的圖片是本實例代碼執行的結果圖示,圖一中是網頁顯示出的本來效果,可以看到圖片和超級鏈接都很清晰,沒有出現半透明效果。圖二是在鼠標放到圖片上和超級鏈接上時,網頁對象顯示出半透明的效果。各位站長們可以結合圖片來更好地理解實例代碼。

網頁對象濾鏡半透明效果實例圖片



(本頁地址為:http://www.hdfwko.tw/tech/tech-7.html,請尊重別人勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家-站長網【www.hdfwko.tw】

四川快乐12开奖号