學習網頁中的圖片如何應用CSS的濾鏡的效果

來源:互聯網
上載者:User

  有時候,我們需要給網頁中的圖片加一些特殊的效果,比如透明、扭曲、陰影或者翻轉等,我們一般都會想到用Photoshop等一些圖形軟體來處理,其實我們也可以利用CSS(層疊式樣表)提供的一些濾鏡來處理,這對於不熟悉Photoshop的網友來說,是非常好的一件事。

  我們先從較簡單的開始,介紹幾個沒有參數的濾鏡。

  1.Gray濾鏡

  Gray濾鏡的作用是產生黑白效果

  使用方法:<img src=www.ddvip.com" style="filter:gray">

  2.Invert濾鏡

  Invert濾鏡的作用是反色效果

  使用方法:<img src=www.ddvip.com" style="filter:invert">

  3.Xray濾鏡

  Xray濾鏡的作用是產生X光效果

  使用方法:<img src=www.ddvip.com" style="filter:xray">

  4.fliph和flipv

  fliph濾鏡的作用是產生水平翻轉效果;flipv濾鏡的作用是產生垂直翻轉效果

  使用方法:<img src=www.ddvip.com" style="filter:fliph">或<img src=www.ddvip.com" style="filter:flipv">

  接下來,我們再介紹幾個比較複雜的濾鏡:

  5.alpha濾鏡

  alpha濾鏡作用主要是對圖片的透明度進行處理

  使用方法:<img src=www.ddvip.com" style="filter:alpha(opacity=value1,finishopacity=value2,style=value3)">

  說明:value1為圖片的透明值,範圍是0(完全透明)~100(完全不透明)

  value2為圖片透明度變換結束時的透明值,範圍是0(完全透明)~100(完全不透明) 註:該值只有在value3設定時才有效

  value3為圖片透明度變換方向。取值為1時,圖片透明度按從左至右線性變化;取值為2時,圖片透明度從內到外沿半徑變化;取值為3時,圖片透明度從內到外呈矩形變化

  例:<img src=www.ddvip.com" style="filter:alpha(opacity=0,finishopacity=60,style=2)">

  6.shadow濾鏡

  shadow濾鏡的作用是產生陰影製作效果

  使用方法:<img src=www.ddvip.com" style="filter:shadow(color=value1,direction=value2)">

  說明:value1為陰影的顏色值,如000000表示黑色

  value2為光線照射角度,如135

  例:<img src=www.ddvip.com" style="filter:shadow(color=000000,direction=135)">

  7.wave濾鏡

  wave濾鏡的作用是使圖片產生扭曲效果

  使用方法:<img src=www.ddvip.com" style="filter:wave(add=value1,freq=value2,lightstrength=value3,phase=value4,strength=value5)">

  說明:value1的取值為1時,將原圖片增加到處理過的圖片上;為0時,則不增加

  value2為視覺扭曲的波浪數

  value3是波形亮度百分比,取值範圍為0~100

  value4為正弦波開始位移的初始量,取值範圍為0~100

  value5為波形效果的強度

  例:<img src=www.ddvip.com" style="filter:wave(add=0,freq=5,lightstrength=50,phase=0,strength=5)">

  下面我們舉一個簡單的例子,瀏覽時會出現這樣的一個效果:網頁上有一個幾乎透明的映像,當滑鼠移到映像上時,映像慢慢變清晰;當滑鼠移開時,映像又恢複到原來的透明狀態。

  要實現這個功能,需要使用到CSS的alpha濾鏡,並用javascript來控制alpha濾鏡的Opacity值,首現在網頁中插入一個圖片,並設定alpha濾鏡的opacity值,讓圖片透明,圖片代碼為:<img src=www.ddvip.com" id="me" style="FILTER:alpha(Opacity=20)">.

  javascript代碼如下:

<script language="javascript">
function ch(n)
{
if(n=="add") //如果傳入的參數為add,則將圖片的不透明度增大
if(me.filters.alpha.Opacity<100)
{
me.filters.alpha.Opacity=me.filters.alpha.Opacity+5;
setTimeout("ch('add')",10);
}
if(n=="dec") //如果傳入的參數為dec,則將圖片的不透明度降低
if(me.filters.alpha.Opacity>20)
{
me.filters.alpha.Opacity=me.filters.alpha.Opacity-5;
setTimeout("ch('adc')",10);
}
}
</script>

  將上面的代碼加入<head></head>中,然後給圖片加入onMouseOver和onMouseOut動作,即<img src=www.ddvip.com" id="me" style="FILTER:alpha(Opacity=20)" onMouseOver="ch('add')" onMouseOut="ch('dec')">.

  好了,關於CSS濾鏡我們就介紹到這裡,相信各位開動腦子,一定會做出更好的效果。



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.