妙用CSS濾鏡為圖片加上特殊效果

來源:互聯網
上載者:User
css|濾鏡 有時候,我們需要給網頁中的圖片加一些特殊的效果,比如透明、扭曲、陰影或者翻轉等,我們一般都會想到用Photoshop等一些圖形軟體來處理,其實我們也可以利用CSS(層疊式樣表)提供的一些濾鏡來處理,這對於不熟悉Photoshop的網友來說,是非常好的一件事。
 
     我們先從較簡單的開始,介紹幾個沒有參數的濾鏡。
     1.Gray濾鏡
       Gray濾鏡的作用是產生黑白效果
       使用方法:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:gray">
       效果如圖所示
 
     2.Invert濾鏡
       Invert濾鏡的作用是反色效果
       使用方法:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:invert">
       效果如圖所示
 
     3.Xray濾鏡
       Xray濾鏡的作用是產生X光效果
       使用方法:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:xray">
       效果如圖所示
 
     4.fliph和flipv
       fliph濾鏡的作用是產生水平翻轉效果;flipv濾鏡的作用是產生垂直翻轉效果
       使用方法:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:fliph">或<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:flipv">
       效果如圖所示
 
   
     接下來,我們再介紹幾個比較複雜的濾鏡:
 
     5.alpha濾鏡
       alpha濾鏡作用主要是對圖片的透明度進行處理
       使用方法:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:alpha(opacity=value1,finishopacity=value2,style=value3)">
       說明:value1為圖片的透明值,範圍是0(完全透明)~100(完全不透明)
     value2為圖片透明度變換結束時的透明值,範圍是0(完全透明)~100(完全不透明) 註:該值只有在value3設定時才有效
             value3為圖片透明度變換方向。取值為1時,圖片透明度按從左至右線性變化;取值為2時,圖片透明度從內到外沿半徑變化;取值為3時,圖片透明度從內到外呈矩形變化
       例:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:alpha(opacity=0,finishopacity=60,style=2)">
       效果如圖所示
 
     6.shadow濾鏡
       shadow濾鏡的作用是產生陰影製作效果
       使用方法:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:shadow(color=value1,direction=value2)">
       說明:value1為陰影的顏色值,如000000表示黑色
     value2為光線照射角度,如135
       例:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" style="filter:shadow(color=000000,direction=135)">
       效果如圖所示
 
     7.wave濾鏡
       wave濾鏡的作用是使圖片產生扭曲效果
       使用方法:<img src="http://www.webjx.com/htmldata/2005-03-10/a.jpg" 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="http://www.webjx.com/htmldata/2005-03-10/a.jpg" style="filter:wave(add=0,freq=5,lightstrength=50,phase=0,strength=5)">
       效果如圖所示
   
 
     下面我們舉一個簡單的例子,瀏覽時會出現這樣的一個效果:網頁上有一個幾乎透明的映像,當滑鼠移到映像上時,映像慢慢變清晰;當滑鼠移開時,映像又恢複到原來的透明狀態。
     要實現這個功能,需要使用到CSS的alpha濾鏡,並用JavaScript來控制alpha濾鏡的Opacity值,首現在網頁中插入一個圖片,並設定alpha濾鏡的opacity值,讓圖片透明,圖片代碼為:<img src="http://www.webjx.com/htmldata/2005-03-10/a.gif" 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="http://www.webjx.com/htmldata/2005-03-10/a.gif" id="me" style="FILTER:alpha(Opacity=20)"  >.
     好了,關於CSS濾鏡我們就介紹到這裡,相信各位開動腦子,一定會做出更好的效果。

 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。