精通CSS.DIV網頁樣式與佈局（八）——濾鏡的使用
我們這次來說說濾鏡的使用，我們首先看看濾鏡的概述：
CSS濾鏡並不是瀏覽器的外掛，也不符合CSS標準，二而是微軟公司為增強瀏覽器功能而特意開發的並整合在IE瀏覽器中的又累功能的集合。由於瀏覽器IE有著很廣的使用範圍，因此CSS濾鏡也被廣大設計者所喜愛。
CSS濾鏡的識別符號是“filter”，總體上跟其他CSS語句一樣，都十分簡單：
filter：filtername(parameters);
我們接下來看看alpha通道：我們先看看效果：
第二幅圖片有點像夜晚的效果：我們看CSS程式碼：
<html> <head> <title>alpha濾鏡</title> <style> <!-- body{ background:url(bg1.jpg); margin:20px; } img{ border:1px solid #d58000; } .alpha{ filter:alpha(opacity=20); } --> </style> </head> <body> <img src="building1.jpg" border="0"> <img src="building1.jpg" border="0" class="alpha"> </body> </html>
這裡我們把filter:alpha(opacity=20)；當然大家可以自己來設定不同的值，來看顯示效果。
我們接著看blur模糊，我們不用photoshop也能製造出模糊的效果。我們先看顯示效果：
我們看一下CSS程式碼：
<html> <head> <title>Blur濾鏡</title> <style> <!-- body{ margin:10px; } .blur{ filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false); } --> </style> </head> <body> <img src="building9.jpg"> <img src="building9.jpg" class="blur"> </body> </html>
我們用了兩張圖片來做對比。第二幅用了class=“blur”，我們看到這句話filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false)；這裡我們將模糊的效果
pixelradius設定為不同的值，則可以看到不同的模糊效果。大家自己動手來試一下。
我們接下來看透明色濾鏡，我們先看顯示效果：
我們很清楚的看到，老虎身上的金黃色進行了過濾。我們看一下程式碼：
<html> <head> <title>chroma濾鏡</title> <style> <!-- body{ margin:10px; } .chroma{ filter:chroma(color=FF6800); /* 去掉金黃色 */ } --> </style> </head> <body> <img src="tiger.gif"> <img src="tiger.gif" class="chroma"> </body> </html>
我們看這句話：filter:chroma(color=FF6800);就是把金黃色去掉。
我們繼續看flip翻轉濾鏡。CSS可以在不處理圖片的環境下，對圖片進行翻轉。
這裡其實是四幅圖片，第一幅（左上角），原片；第二幅進行了水平的映像，第三幅進行了豎直方向的映象；而右下角同時進行了水平和豎直方向的映像。我們看一下程式碼：
<html>
<head>
<title>Flip翻轉</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.flip1{
filter:fliph; /* 水平翻轉 */
}
.flip2{
filter:flipv; /* 豎直翻轉 */
}
.flip3{
filter:flipv fliph; /* 水平、豎直同時翻轉 */
}
-->
</style>
</head>
<body>
<img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
<img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
</body>
</html>
我們從程式碼中也看的出來，flip1進行了水平翻轉……
我們繼續看遮罩，photoshop裡邊有強大的遮罩功能，我們看CSS中的效果：
我們看到第二幅圖，有點像影子變幻的效果，我們看一下CSS程式碼：
<html>
<head>
<title>Mask遮罩</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.mask{
filter:mask(color=RED); /* 遮罩效果 */
}
-->
</style>
</head>
<body>
<img src="muma.gif">
<img src="muma.gif" class="mask">
</body>
</html>
我們的程式碼中，第一幅圖片沒有做處理，第二幅圖片進行了mask處理。我們看這句話：filter:mask(color=RED);這裡是顯示需要遮罩的顏色。
我們繼續看最好一個濾鏡，波浪濾鏡：我們經常採用photoshop來實現波浪效果，css也可以，我們看一下效果：
我們看一下這個程式碼：
<html>
<head>
<title>Wave波浪濾鏡</title>
<style>
<!--
body{
margin:12px;
background-color:#e4f1ff;
}
span{
font-family:Arial, Helvetica, sans-serif;
height:100px; font-size:80px;
font-weight:bold;
color:#50a6ff;
}
span.wave1{
filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
}
span.wave2{
filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
}
span.wave3{
filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
}
-->
</style>
</head>
<body>
<span class="wave1">波浪Wave</span>
<span class="wave2">波浪Wave</span>
<span class="wave3">波浪Wave</span>
</body>
</html>這裡的三段文字，每一個都採用了一個波浪的效果；filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);表示的是頻率是2，最後的程度是4。
我們最後綜合做一個例子。各種各樣的濾鏡進行搭配。效果圖：
程式碼：
<html>
<head>
<title>三個濾鏡同時使用</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.three{
filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);
/* 同時使用三個濾鏡 */
/* 豎直翻轉、透明、波浪效果 */
}
-->
</style>
</head>
<body>
<img src="lotus.jpg"><br>
<img src="lotus.jpg" class="three">
</body>
</html>當然大家要是想做的更好一些，還是推薦photoshop，只是CSS也能很簡單的實現這些功能，但是貌似在我的IE裡邊能顯示這個效果，在別的瀏覽器顯示不出來，所以大家想完美一些，那麼就建議用photoshop。