我們這次來說說濾鏡的使用，我們首先看看濾鏡的概述：
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。
我參加了IT部落格，大家去投個票哦。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
