萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS的濾鏡的使用方法介紹

CSS的濾鏡的使用方法介紹

歡迎大家在這裡學習CSS的濾鏡的使用方法!這裡是我們給大家整理出來的精彩內容。我相信,這些問題也肯定是很多朋友在關心的,所以我就給大家談談這個!

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

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

1.Gray濾鏡

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

2.Invert濾鏡

Invert濾鏡的作用是反色效果

3.Xray濾鏡

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

4.fliph和flipv

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

5.alpha濾鏡

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

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

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

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

片透明度從內到外呈矩形變化

6.shadow濾鏡

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

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

value2為光線照射角度,如135

7.wave濾鏡

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

使用方法:

以下是引用片段:

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

value2為視覺扭曲的波浪數

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

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

value5為波形效果的強度

下面我們舉一個簡單的例子,浏覽時會出現這樣的一個效果:網頁上有一個幾乎透明的圖像,當鼠標移到圖像上時,圖像慢慢變清晰;當鼠

標移開時,圖像又恢復到原來的透明狀態。

要實現這個功能,需要使用到CSS的alpha濾鏡,並用javascript來控制alpha濾鏡的Opacity值,首現在網頁中插入一個圖片,並設定alpha

濾鏡的opacity值,讓圖片透明,圖片代碼為:

以下是引用片段:

javascript代碼如下:

以下是引用片段:

相信大家已經學會CSS的濾鏡的使用方法了吧!感謝大家對我們網站的支持!

相關推薦:

怎麼控制CSS網頁背景呢 

 

copyright © 萬盛學電腦網 all rights reserved