當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

CSS滤镜

發布時間：2023/11/27 生活经验 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS滤镜小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作者：千禧在線

1、概述

　　好了，下面我們將進入CSS的最精彩的部分--濾鏡，它將把我們帶入絢麗多姿的多媒體世界。正是有了濾鏡屬性，頁面才變得更加漂亮。
　　CSS的濾鏡屬性的標識符是filter。為了使您對它有個整體的印象，我們先來看一下它的書寫格式：

　　 filter：filtername（parameters）

　　怎么樣？是不是很簡單，看上去與前面講的屬性定義沒什么太大的差別。Filter是濾鏡屬性選擇符。
　　也就是說，只要您進行濾鏡操作，就必須先定義filter；filtername是濾鏡屬性名，這里包括alpha、blur、chroma等等多種屬性，詳細內容請看下表：

　　上面filter表達式中括號內的parameters是表示各個濾鏡屬性的參數，也正是這些參數決定了濾鏡將以怎樣的效果顯示。
　　　下一節我們將首先學習Alpha透明屬性的應用。

2、alpha屬性

　　alpha是來設置透明度的。先來看一下它的表達格式：

　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY）

　　哇，怎么這么長。是啊，不過這些參數都各有其用。
　　Opacity代表透明度等級，可選值從0到100，0代表完全透明，100代表完全不透明。 Style參數指定了透明區域的形狀特征。其中0代表統一形狀；1代表線形；2代表放射狀；3代表長方形。
　　Finishopacity是一個可選項，用來設置結束時的透明度，從而達到一種漸變效果，它的值也是從0到100。 StartX和StartY代表漸變透明效果的開始坐標，finishX和finishY代表漸變透明效果的結束坐標。
　　從上面講的我們可以看出，如果不設置透明漸變效果，那么只需設置opacity這一個參數就可以了。說了這么多，我們來看一個實例吧（見下圖）：

　　實現上面這種效果的代碼如下：

<html>
　　<head>
　　<title>alpha</title>
　　<style>//*定義CSS樣式*//
　　
　　</style>
　　</head>
　　<body>
　　<div>
　　<p style=“font-size：48；font-weight：bold；color：red；”>
　　Beautiful </p>//*定義字體屬性，前景色為紅色*//
　　</div>
　　<p><img src=“ss01076.jpg”> </p>
　　//*導入一張圖片*//
　　</body>
　　</html>

　　如果在上面的代碼中稍做改動，則將產生另外多種效果。我們只修改img的樣式屬性，把head中的Img樣式屬性代碼改為如下所示：

　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=0,finishopacity=100,
　　style=1,startx=0,starty=85,finishx=150,finishy=85);}
　 //*設置透明漸變效果，起始坐標，終止漸變坐標，并設置透明樣式值（style=1）為　　　線形*//

　　這段代碼產生的效果如左下圖所示，右面的兩幅圖分別是把Alpha中的Style參數值為2和3后的效果，點擊縮略圖可放大。

　　　　　　Style=1　　　　　　　　Style=2　　　　　　　　Style=3

　　以上是CSS的Alpha濾鏡屬性的應用，具體應用還需要您自己找個例子練一練。

3、blur屬性

　　假如您用手在一幅還沒干透的油畫上迅速劃過，畫面就會變得模糊。CSS下的blur屬性就會達到這種模糊的效果。
　　先來看一下blur屬性的表達式：

　　filter：blur（add=add，direction，strength=strength）

　　我們看到blur屬性有三個參數：add、direction、strength。
　　Add參數有兩個參數值：true和false。意思是指定圖片是否被改變成模糊效果。　　　Direction參數用來設置模糊的方向。模糊效果是按照順時針方向進行的。其中0度代表垂直向上，每45度一個單位，默認值是向左的270度。角度方向的對應關系見下表：

　　Strength參數值只能使用整數來指定，它代表有多少像素的寬度將受到模糊影響。默認值是5像素。
　　

　　看起來是不是有些像萬花筒，在這個例子中加入了一些JavaScript的語句，代碼如下：

　　<html>
　　　<head>
　　　<title>blur css</title>
　　　<script>
　　　function handlechange(obj)
　　　//*設置一個循環函數handlechange，對象是obj*//
　　　{ with(obj.filters(0))//*Obj的filter屬性*//
　　　 { if (strength<255)//*設置循環條件*//
　　　　 { strength +=1；direction +=45；}
　　　　//*每循環一次strength就加1，direction加45度*// 　　　　　　　
　　　 }
　　　}
　　　</script>
　　　</head>
　　　<body>
　　　<p><img id =“img1” src=“ss01087.jpg” 　　　　　　　　
　　　　　style=“filter：blur(strength=1)”
　　　　　onfilterchange=“handlechange(this)”>
　　　//*導入一幅圖片，初始blur屬性strength等于1，同時調用onfilterchange函
　　　數*//
　　　</p>
　　　 </body>
　　</html>

　　注：在javascript中blur屬性是這樣定義的：
　　　　[oBlurfilter=] object.Filters.blur

　　這個例子是Blur屬性的一個比較復雜的例子，下一節我將向您介紹兩個較簡單的blur屬性效果。

4、Chroma屬性

　　Chroma屬性可以設置一個對象中指定的顏色為透明色，它的表達式如下：

　　Filter：Chroma（color=color）

　　這個屬性的表達式是不是很簡單，它只有一個參數。只需把您想要指定透明的顏色用Color參數設置出來就可以了。比如下面這幅圖：

　　圖中顯示兩種字體，兩種顏色，我們現在對“leaves”字體添加chroma屬性，使其透明。代碼如下：

<html>
　　　<head>
　　　<title>chroma filter</title>
　　　<style>
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p>LEAVES <em>LOVE</em></p>
　　　</div>
　　　</body>
　　</html>

　　通過上面代碼中對chroma的屬性設置，使綠色透明。顯示效果如下圖：

　　我們看到綠色的leaves字體不見了，實際上它是透明了，在IE下點擊它所在的區域，它還是會顯示出來（見下圖）：

　　另外，需要注意的是，chroma屬性對于圖片文件不是很適合。因為很多圖片是經過了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設置為透明。

　　本節我們講述了chroma屬性的應用，下一節將向您介紹Dropshadow屬性。

5、DropShadow屬性

　　DropShadow屬性是為了添加對象的陰影效果的。它實現的效果看上去就像使原來的對象離開頁面，然后在頁面上顯示出該對象的投影。看一看它的表達式：

　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
　　　　　　　　　　　　Positive=positive）

　　該屬性一共有四個參數： Color代表投射陰影的顏色。 Offx和offy分別X方向和Y方向陰影的偏移量。偏移量必須用整數值來設置。如果設置為正整數，代表X軸的右方向和Y軸的向下方向。設置為負整數則相反。
　　Positive參數有兩個值：True為任何非透明像素建立可見的投影，False為透明的像素部分建立可見的投影。
　　同樣，我們先來看一個例子（見下圖）：

　　看，圖中的文字就像是從頁面上飛出來一樣，并且留下了一層淡淡的影子。
　　實際上在這里應用的就是CSS的DropShadow屬性，我們來看一下它的代碼：

<html>
　　　<head>
　　　<title>dropshadow </title>
　　　<style>//*定義CSS樣式*//
　　　
　　　//*定義DIV范圍內的樣式，絕對定位，投影的顏色為#FFCCFF，
　　　投影坐標為向右偏移15個像素，向下偏移10個像素*//
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p style=“font-family：matisse itc；font-size：64；
　　　　　　　　font-weight：bold；color：#CC00CC；”>
　　　//*定義字體名稱、大小、粗細、顏色*//
　　　Love Leaf </p>
　　 </div>
　　 </body>
　　 </html>

　　和chroma屬性一樣，Dropshadow屬性對圖象的支持不好，我指的是JPEG、GIF格式的圖象文件。
　　不能支持的原因與Chroma一樣，因為這種圖象的顏色很豐富，很難找到一個投射陰影的位置。

　　本節講述了Dropshadow屬性的應用，下一節將向您介紹FlipH、FlipV的屬性應用。

6、FlipH、FlipV屬性

　　Flip是CSS濾鏡的翻轉屬性，FlipH代表水平翻轉，FlipV代表垂直翻轉。它們的表達式很簡單，分別是：

　　Filter：FlipH

　　Filter：FlipV

　　我們先來看一幅圖：

　　下面我們分別對它實現水平翻轉和垂直翻轉，并且在圖片上方的一段文字，也發生翻轉。代碼如下：

<html>
　　　<head>
　　　<title>flip css</title>
　　　<style>//*設置CSS樣式開始*//
　　　
　　 </style>
　　 </head>
　　　<body>
　　　<div>
　　　<p style=“font-family：bailey；font-size：36pt；
　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”>
　　　 Leaf Village </p>
　　 //*定義字體名稱、大小、粗細、顏色*//
　　 </div>
　　 <p><img src=“ss05058.jpg”></p>
　　 //*導入一張圖片*//
　　 </body>
　　</html>

　　代碼產生的兩個效果分別如下圖：

　　　　　　　　水平翻轉　　　　　　　　　　　　　　　　垂直翻轉

　　翻轉的屬性應用是不是很簡單。下一節我將向您介紹Glow屬性。

7、Glow屬性

　　當對一個對象使用“Glow”屬性后，這個對象的邊緣就會產生類似發光的效果。它的表達式如下：

　　Filter：Glow（Color=color，Strength=strength）

　　Glow屬性的參數只有兩個：Color是指定發光的顏色，Strength指定發光的強度，參數值從1到255。讓我們先來看一下加上Glow屬性的效果圖：

　　怎么樣，是不是有一種燃燒的火焰的感覺。實現這種效果的代碼如下：

<html>
　　　 <head>
　　　 <title>filter glow</title>
　　　 <style>//*開始設置CSS樣式*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div class=“leaf”>//*leaf類樣式*//
　　　 <p style=“font-family：lucida handwriting；
　　　　　　　　　font-size：54pt；font-weight：bold；color：#003366；”>
　　　　Leaf Mylove</p>//*設置字體名稱、大小、粗細、顏色*//
　　　 </div>
　　　 <div class=“weny”>//*weny類樣式*//
　　　 <p style=“font-family：bailey； font-size：48pt；
　　　　　　　　　font-weight：bold；color：#99CC66；”>
　　　 //設置字體名稱、大小、粗細、顏色*//
　　　 Weny Good!</p>
　　　 </div>
　　　 </body>
　　</html>

　　您還可以隨意修改顏色值，看看其他的發光效果是怎樣的。
　　本節主要講了Glow屬性的應用，下一節將向您介紹Gray屬性。

8、Invert屬性

　　Invert屬性可以把對象的可視化屬性全部翻轉，包括色彩、飽和度和亮度值。
　　它的表達式也很簡單：

　　Filter：Invert

　　我們再來看一下加上Invert屬性前后的圖片效果變化（如下圖）：

　　　　　　　　原圖　　　　　　　　　　　　　　　 Invert屬性效果圖
　

　　我們看到Invert屬性實際上達到的是一種“底片”的效果。
　　自己拿別的圖來試試吧。本節介紹的是Invert屬性，下一節將向您介紹Mask屬性。

9、Mask屬性

　　Mask屬性為對象建立一個覆蓋于表面的膜。它的表達式也很簡單：

　　Filter：Mask（Color=顏色）

　　只有一個Color參數，用來指定使用什么顏色作為掩膜。
　　同樣，我們來看一下一幅圖片在加上mask屬性前后的效果（見下圖）：

原　圖

Mask屬性效果圖

　　加上MASK屬性的效果就好象是在用有色眼鏡看物體一樣。上面的效果的代碼如下：

<html>
　　　 <head>
　　　 <title> mask filter </title>
　　　 <style>//*設置CSS樣式開始*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div>
　　　 <p> wenyleaf </p>
　　　 </div>
　　　 </body>
　　</html>

　　其實，您就算在代碼中去掉對字體前景色的定義，得到的效果還是一樣的。因為有了Mask屬性的定義，它遮罩下的字體顏色的設置就已經失去了意義。
　　還有一點需要您注意的地方，mask屬性對圖片文件的支持還是不夠，不能達到應該有的效果。
　　本節講解了Mask屬性的應用，下一節將向您介紹Shadow（陰影）屬性。

10、Shadow屬性

　　Shadow屬性可以在指定的方向建立物體的投影。它的表達式是這樣的：

　　Filter：Shadow（Color=color，Direction=direction）

　　在這里，Shadow有兩個參數值：Color參數用來指定投影的顏色；Direction參數用來指定投影的方向。
　　這里說的方向與我們在第二節Blur屬性中提到的“方向與角度的關系”是一樣的。　　也許您會問，前面講到的Dropshadow屬性和Shadow屬性有什么不同嗎？
　　光說的話，您恐怕還難以理解，讓我們看一看分別利用這兩個屬性做出來的效果有什么不同（見下圖）：

　　　　　　　　　Shadow效果　　　　　　　　Dropshadow效果

　　這樣一對比，就可以很明顯的看出兩者的不同。
　　Shadow屬性可以在任意角度進行投射陰影，Dropshadow屬性實際上是用偏移來定義陰影的。所以，看上去左圖的文字和陰影就像是一體的，而右圖的文字就像脫離了陰影一樣。
　　本例的代碼如下：

<html>
　　　<head>
　　　<title> shadow</title>
　　　<style>//*開始設置CSS樣式*//
　　　
　　 </style>
　　 </head>
　　 <body>
　　 <div class=“shadow”>//*區域內為Shadow類*//
　　 <p style=“font-family：bailey；font-size：48pt；
　　　　　　　　font-weight：bold；color：#FF9900；”>
　　　china-yk Online</p>//*定義字體名稱、大小、粗細、前景色*//
　　　</div>
　　　<div class=“dropshadow”>//*區域內為Dropshadow類*//
　　　<p style=“font-family：bailey；font-size：48pt；
　　　　　　　　 font-weight：bold；color：#FF9900；”>
　　　 china-yk Online</p>//*定義字體樣式與Shadow類的一樣*//
　　　</div>
　　　</body>
　　</html>

　　本節講述了Shadow屬性的應用，下一節將向您介紹Wave（波紋）屬性。　

12、Wave屬性

　　Wave屬性用來把對象按照垂直的波紋樣式打亂。它的表達式如下：

　　Filter：Wave（Add=True（False），Freq=頻率，LightStrength=增強光效，
　　　　　　Phase=偏移量，Strength=強度）

　　我們看到Wave屬性的表達式還是比較復雜的，它一共有五個參數。Add參數有兩個參數值：True代表把對象按照波紋樣式打亂；False代表不打亂；
　　Freq參數指生成波紋的頻率，也就是指定在對象上共需要產生多少個完整的波紋。　　LightStrength參數是為了使生成的波紋增強光的效果。參數值可以從0到100。　　　Phase參數用來設置正弦波開始的偏移量。這個值的通用值為0，它的可變范圍為從0到100。這個值代表開始時的偏移量占波長的百分比。比如該值為25，代表正弦波從90度（360*25%）的方向開始。
　　說了一大堆，我們還是先看一個實例吧。比如下面這幅圖片：

　　下面我們對上面這個頁面加上Wave效果，代碼如下：

<html>
　　　<head>
　　　<title> wave css</title>
　　　<style>//*定義CSS 樣式開始*//
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div class=“wave”>//*定義DIV區域內為Wave類*//
　　　<p style=“font-family：lucida handwriting；
　　　　　　　font-size=72pt； font-weight：bold；
　　　　　　　color：rgb(189,1,64)；”>Leaf</p>
　　　//*設置字體名稱、大小、粗細、顏色*//
　　　</div>
　　　<p><img src=“ss01044.jpg”></p> //*導入圖片*// 　　　
　　</body>
　　</html>

　　這段代碼實現的效果如下圖：

　　如果把Wave的參數隨便做一下改動，就會達到多種效果，請看另外一種效果：（如下圖）：

　　其實這種效果只是增大了freq參數的值，減小了Strength、LightStrength的值就可以了。您也可以多試試，改變其他的參數值，還可以達到許多不同的效果來。
　　本節主要講述了Wave屬性的應用，下一節將向您介紹Xray屬性。

13、Xray屬性

　　Xray就是X射線的意思。
　　Xray屬性，顧名思義，這種屬性產生的效果就是使對象看上去有一種X光片的感覺。它的表達式很簡單：

　　Filter：Xray

　　我們還是先來看一個頁面（如下圖）：

　　如果在上面的頁面中加入Xray屬性，也就是在<head>的<Style>中，增添下面這一句代碼：

　　Filter：Xray

　　您再看這個頁面就會是另一種效果了：（如下圖）

　　看，是不是就像給它拍了一張X光片一樣。

總結

以上是生活随笔為你收集整理的CSS滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

滤镜
css