當(dāng)前位置：首頁(yè) > 人文社科 > 生活经验 >内容正文

生活经验

CSS滤镜

發(fā)布時(shí)間：2023/11/27 生活经验 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS滤镜小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

作者：千禧在線(xiàn)

1、概述

　　好了，下面我們將進(jìn)入CSS的最精彩的部分--濾鏡，它將把我們帶入絢麗多姿的多媒體世界。正是有了濾鏡屬性，頁(yè)面才變得更加漂亮。
　　CSS的濾鏡屬性的標(biāo)識(shí)符是filter。為了使您對(duì)它有個(gè)整體的印象，我們先來(lái)看一下它的書(shū)寫(xiě)格式：

　　 filter：filtername（parameters）

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

　　上面filter表達(dá)式中括號(hào)內(nèi)的parameters是表示各個(gè)濾鏡屬性的參數(shù)，也正是這些參數(shù)決定了濾鏡將以怎樣的效果顯示。
　　　下一節(jié)我們將首先學(xué)習(xí)Alpha透明屬性的應(yīng)用。

2、alpha屬性

　　alpha是來(lái)設(shè)置透明度的。先來(lái)看一下它的表達(dá)格式：

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

　　哇，怎么這么長(zhǎng)。是啊，不過(guò)這些參數(shù)都各有其用。
　　Opacity代表透明度等級(jí)，可選值從0到100，0代表完全透明，100代表完全不透明。 Style參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀；1代表線(xiàn)形；2代表放射狀；3代表長(zhǎng)方形。
　　Finishopacity是一個(gè)可選項(xiàng)，用來(lái)設(shè)置結(jié)束時(shí)的透明度，從而達(dá)到一種漸變效果，它的值也是從0到100。 StartX和StartY代表漸變透明效果的開(kāi)始坐標(biāo)，finishX和finishY代表漸變透明效果的結(jié)束坐標(biāo)。
　　從上面講的我們可以看出，如果不設(shè)置透明漸變效果，那么只需設(shè)置opacity這一個(gè)參數(shù)就可以了。說(shuō)了這么多，我們來(lái)看一個(gè)實(shí)例吧（見(jiàn)下圖）：

　　實(shí)現(xiàn)上面這種效果的代碼如下：

<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>
　　//*導(dǎo)入一張圖片*//
　　</body>
　　</html>

　　如果在上面的代碼中稍做改動(dòng)，則將產(chǎn)生另外多種效果。我們只修改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);}
　 //*設(shè)置透明漸變效果，起始坐標(biāo)，終止?jié)u變坐標(biāo)，并設(shè)置透明樣式值（style=1）為　　　線(xiàn)形*//

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

　　　　　　Style=1　　　　　　　　Style=2　　　　　　　　Style=3

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

3、blur屬性

　　假如您用手在一幅還沒(méi)干透的油畫(huà)上迅速劃過(guò)，畫(huà)面就會(huì)變得模糊。CSS下的blur屬性就會(huì)達(dá)到這種模糊的效果。
　　先來(lái)看一下blur屬性的表達(dá)式：

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

　　我們看到blur屬性有三個(gè)參數(shù)：add、direction、strength。
　　Add參數(shù)有兩個(gè)參數(shù)值：true和false。意思是指定圖片是否被改變成模糊效果。　　　Direction參數(shù)用來(lái)設(shè)置模糊的方向。模糊效果是按照順時(shí)針?lè)较蜻M(jìn)行的。其中0度代表垂直向上，每45度一個(gè)單位，默認(rèn)值是向左的270度。角度方向的對(duì)應(yīng)關(guān)系見(jiàn)下表：

　　Strength參數(shù)值只能使用整數(shù)來(lái)指定，它代表有多少像素的寬度將受到模糊影響。默認(rèn)值是5像素。
　　

　　看起來(lái)是不是有些像萬(wàn)花筒，在這個(gè)例子中加入了一些JavaScript的語(yǔ)句，代碼如下：

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

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

　　這個(gè)例子是Blur屬性的一個(gè)比較復(fù)雜的例子，下一節(jié)我將向您介紹兩個(gè)較簡(jiǎn)單的blur屬性效果。

4、Chroma屬性

　　Chroma屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色，它的表達(dá)式如下：

　　Filter：Chroma（color=color）

　　這個(gè)屬性的表達(dá)式是不是很簡(jiǎn)單，它只有一個(gè)參數(shù)。只需把您想要指定透明的顏色用Color參數(shù)設(shè)置出來(lái)就可以了。比如下面這幅圖：

　　圖中顯示兩種字體，兩種顏色，我們現(xiàn)在對(duì)“l(fā)eaves”字體添加chroma屬性，使其透明。代碼如下：

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

　　通過(guò)上面代碼中對(duì)chroma的屬性設(shè)置，使綠色透明。顯示效果如下圖：

　　我們看到綠色的leaves字體不見(jiàn)了，實(shí)際上它是透明了，在IE下點(diǎn)擊它所在的區(qū)域，它還是會(huì)顯示出來(lái)（見(jiàn)下圖）：

　　另外，需要注意的是，chroma屬性對(duì)于圖片文件不是很適合。因?yàn)楹芏鄨D片是經(jīng)過(guò)了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設(shè)置為透明。

　　本節(jié)我們講述了chroma屬性的應(yīng)用，下一節(jié)將向您介紹Dropshadow屬性。

5、DropShadow屬性

　　DropShadow屬性是為了添加對(duì)象的陰影效果的。它實(shí)現(xiàn)的效果看上去就像使原來(lái)的對(duì)象離開(kāi)頁(yè)面，然后在頁(yè)面上顯示出該對(duì)象的投影。看一看它的表達(dá)式：

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

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

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

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

　　和chroma屬性一樣，Dropshadow屬性對(duì)圖象的支持不好，我指的是JPEG、GIF格式的圖象文件。
　　不能支持的原因與Chroma一樣，因?yàn)檫@種圖象的顏色很豐富，很難找到一個(gè)投射陰影的位置。

　　本節(jié)講述了Dropshadow屬性的應(yīng)用，下一節(jié)將向您介紹FlipH、FlipV的屬性應(yīng)用。

6、FlipH、FlipV屬性

　　Flip是CSS濾鏡的翻轉(zhuǎn)屬性，FlipH代表水平翻轉(zhuǎn)，FlipV代表垂直翻轉(zhuǎn)。它們的表達(dá)式很簡(jiǎn)單，分別是：

　　Filter：FlipH

　　Filter：FlipV

　　我們先來(lái)看一幅圖：

　　下面我們分別對(duì)它實(shí)現(xiàn)水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)，并且在圖片上方的一段文字，也發(fā)生翻轉(zhuǎn)。代碼如下：

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

　　代碼產(chǎn)生的兩個(gè)效果分別如下圖：

　　　　　　　　水平翻轉(zhuǎn)　　　　　　　　　　　　　　　　垂直翻轉(zhuǎn)

　　翻轉(zhuǎn)的屬性應(yīng)用是不是很簡(jiǎn)單。下一節(jié)我將向您介紹Glow屬性。

7、Glow屬性

　　當(dāng)對(duì)一個(gè)對(duì)象使用“Glow”屬性后，這個(gè)對(duì)象的邊緣就會(huì)產(chǎn)生類(lèi)似發(fā)光的效果。它的表達(dá)式如下：

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

　　Glow屬性的參數(shù)只有兩個(gè)：Color是指定發(fā)光的顏色，Strength指定發(fā)光的強(qiáng)度，參數(shù)值從1到255。讓我們先來(lái)看一下加上Glow屬性的效果圖：

　　怎么樣，是不是有一種燃燒的火焰的感覺(jué)。實(shí)現(xiàn)這種效果的代碼如下：

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

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

8、Invert屬性

　　Invert屬性可以把對(duì)象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度和亮度值。
　　它的表達(dá)式也很簡(jiǎn)單：

　　Filter：Invert

　　我們?cè)賮?lái)看一下加上Invert屬性前后的圖片效果變化（如下圖）：

　　　　　　　　原圖　　　　　　　　　　　　　　　 Invert屬性效果圖
　

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

9、Mask屬性

　　Mask屬性為對(duì)象建立一個(gè)覆蓋于表面的膜。它的表達(dá)式也很簡(jiǎn)單：

　　Filter：Mask（Color=顏色）

　　只有一個(gè)Color參數(shù)，用來(lái)指定使用什么顏色作為掩膜。
　　同樣，我們來(lái)看一下一幅圖片在加上mask屬性前后的效果（見(jiàn)下圖）：

原　圖

Mask屬性效果圖

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

<html>
　　　 <head>
　　　 <title> mask filter </title>
　　　 <style>//*設(shè)置CSS樣式開(kāi)始*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div>
　　　 <p> wenyleaf </p>
　　　 </div>
　　　 </body>
　　</html>

　　其實(shí)，您就算在代碼中去掉對(duì)字體前景色的定義，得到的效果還是一樣的。因?yàn)橛辛薓ask屬性的定義，它遮罩下的字體顏色的設(shè)置就已經(jīng)失去了意義。
　　還有一點(diǎn)需要您注意的地方，mask屬性對(duì)圖片文件的支持還是不夠，不能達(dá)到應(yīng)該有的效果。
　　本節(jié)講解了Mask屬性的應(yīng)用，下一節(jié)將向您介紹Shadow（陰影）屬性。

10、Shadow屬性

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

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

　　在這里，Shadow有兩個(gè)參數(shù)值：Color參數(shù)用來(lái)指定投影的顏色；Direction參數(shù)用來(lái)指定投影的方向。
　　這里說(shuō)的方向與我們?cè)诘诙?jié)Blur屬性中提到的“方向與角度的關(guān)系”是一樣的。　　也許您會(huì)問(wèn)，前面講到的Dropshadow屬性和Shadow屬性有什么不同嗎？
　　光說(shuō)的話(huà)，您恐怕還難以理解，讓我們看一看分別利用這兩個(gè)屬性做出來(lái)的效果有什么不同（見(jiàn)下圖）：

　　　　　　　　　Shadow效果　　　　　　　　Dropshadow效果

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

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

　　本節(jié)講述了Shadow屬性的應(yīng)用，下一節(jié)將向您介紹Wave（波紋）屬性。　

12、Wave屬性

　　Wave屬性用來(lái)把對(duì)象按照垂直的波紋樣式打亂。它的表達(dá)式如下：

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

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

　　下面我們對(duì)上面這個(gè)頁(yè)面加上Wave效果，代碼如下：

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

　　這段代碼實(shí)現(xiàn)的效果如下圖：

　　如果把Wave的參數(shù)隨便做一下改動(dòng)，就會(huì)達(dá)到多種效果，請(qǐng)看另外一種效果：（如下圖）：

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

13、Xray屬性

　　Xray就是X射線(xiàn)的意思。
　　Xray屬性，顧名思義，這種屬性產(chǎn)生的效果就是使對(duì)象看上去有一種X光片的感覺(jué)。它的表達(dá)式很簡(jiǎn)單：

　　Filter：Xray

　　我們還是先來(lái)看一個(gè)頁(yè)面（如下圖）：

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

　　Filter：Xray

　　您再看這個(gè)頁(yè)面就會(huì)是另一種效果了：（如下圖）

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

總結(jié)

以上是生活随笔為你收集整理的CSS滤镜的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

滤镜
css