譯自：[http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/](http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/) Jeffrey Way于2011年12月22日 譯者：蔣宇捷（轉載請標明出處-[http://blog.csdn.net/hfahe](http://blog.csdn.net/hfahe)） ------ 教程詳細內容 ?主題：CSS濾鏡 ?可用性： [Webkit每晚構建的版本](http://tools.google.com/dlpage/chromesxs) ?酷炫程度：100 [**觀看演示**](http://jsbin.com/uziyih) ? ? ? 本月初公布了一個新的規范-[濾鏡效果1.0](https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html)。 它提出了一些令人興奮的新特性，我們可以使用它在瀏覽器中來創建Photoshop般的效果。 更妙的是， [Webkit](http://tools.google.com/dlpage/chromesxs)已經在每晚構建的版本中添加了支持！ **根據此規范...** “濾鏡效果是一個圖形化的操作，它被應用到一個元素上以繪制到頁面文檔里。它是一種基于圖像的效果，因為它接受零個或多個圖像作為輸入，指定若干效果的具體參數，然后產生圖像作為輸出。“ 現在，至少在這一點上，我并不認為可以告訴你這些新濾鏡可能相關的一切。 我自己仍然還在學習中。 這就是說，我將向你展示我們如何在新的項目中使用一些新的濾鏡，然后希望我們可以集思廣益，相互學習和借鑒。現在讓我們開始吧。 濾鏡通常和圖像結合（雖然它們也可以應用在視頻上）。 因此在下面的演示里，我們將使用Nettuts +的標志作為輸入。 ~~~ <img src="http://d2o0t5hpnwv4c1.cloudfront.net/nt-logo.jpg" alt="Nettuts+ Logo"> ~~~  *“請謹記：這些濾鏡在WebKit瀏覽器的公共版本中尚不可用。現在可以下載[Chrome Canary](http://tools.google.com/dlpage/chromesxs)用于觀看這些演示。“* **色相旋轉** ? ? ??曾經和Photoshop色相/飽和度面板打過交道嗎？ 現在好了，你可以在瀏覽器中應用它。 ~~~ img { -webkit-filter: hue-rotate(50deg); } ~~~ ? ? ??如果對這個度數值如何設定感到困惑，可以試想一下一個色輪。 您指定的度數值決定了該輪停止之處。 這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。 在這種情況下，Nettuts +的標志將采取ISH藍光色調。  [觀看演示](http://jsbin.com/ohuhek) ? ? ??或者如果你希望圖像不斷的改變顏色。 可能在真實項目中，色彩過渡會微妙得多，但這個演示中我們將簡單表示。 ~~~ img { -webkit-animation: adjustHue 1s alternate infinite; } @-webkit-keyframes adjustHue { 0% { -webkit-filter: hue-rotate(30deg); } 50% { -webkit-filter: hue-rotate(60deg); } 100% { -webkit-filter: hue-rotate(90deg); } } ~~~ ? ? ??相當簡單。 [查看演示](http://jsbin.com/ohuhek/65) **灰度** ? ? ??我們過去曾經使用各種hack來在瀏覽器中實現從黑白色過渡為彩色圖像。其中一種技術要求兩幅圖像疊在彼此之上。 另一種選擇是使用Canvas。 現在我們可以使用grayscale濾鏡。 ~~~ img { -webkit-filter: grayscale(100%); } ~~~ ? ? ??當使用以百分比表示的grayscale函數時，自己可以考慮一下，“在0至100％之間“，我想要這個圖片以多深的灰度來表示？  [觀看演示](http://jsbin.com/ohuhek/2) ? ? ??在和CSS3的transitions配合使用時，我們可以表現一個非常干凈漂亮的鼠標懸停效果。 ~~~ img { -webkit-transition: -webkit-filter 1s; } img:hover { -webkit-filter: grayscale(100%); } ~~~ ? ? ??將來你要提供其他瀏覽器的前綴，但是現在沒有必要。 無需添加Firefox的transitions，因為濾鏡目前僅WebKit內核。 [觀看演示](http://jsbin.com/ohuhek/3) **Sepia-棕褐色** ? ? ??喜歡Instagram Sepia風格的濾鏡效果？讓我們看看Nettuts+圖標的懷舊風格。 ~~~ img { -webkit-filter: sepia(100%); } ~~~  [查看演示](http://jsbin.com/ohuhek/4) ? ? ??不過通常情況下這個效果將會用到照片上。讓我們看看有史以來最偉大的藝術家在Sepia濾鏡下的效果。  [查看演示](http://jsbin.com/ohuhek/4) ? ? ??相當完美。 **虛化** ? ? ??通過設置半徑我們可以輕松的在瀏覽器中虛化一張圖片。 ~~~ img { -webkit-filter: blur(2px); } ~~~  ? [觀看演示](http://jsbin.com/ohuhek/5) ? ? ??或將虛化半徑加大到50像素。  [觀看演示](http://jsbin.com/ohuhek/14) **亮度** ? ? ??我們使用brightness濾鏡來指定輸入圖像呈現出的亮度。 ~~~ img { -webkit-filter: brightness(15%); } ~~~  [觀看演示](http://jsbin.com/ohuhek/6) ? ? ??將100％考慮成基準點。brightness(100%)保持原圖不變。 然而當我們降低這個百分比時，圖像將不斷變暗。 *“不要忘記：你可以把所有這些濾鏡疊加起來。”* ~~~ img { -webkit-filter: brightness(60%) sepia(100%); } ~~~  [觀看演示](http://jsbin.com/ohuhek/7) **對比度** ? ? ??現在我們可以很容易地調整圖像的對比度。 ~~~ img { -webkit-filter: contrast(200%); } ~~~  [觀看演示](http://jsbin.com/ohuhek/9) [](http://jsbin.com/ohuhek/9)? ? ? ??再次將100%考慮成基準點。 我們可以通過增加或減少這個值來調整圖像的對比度。 根據規范，設置為0%將會使圖像全黑。你可能期望-webkit-filter: brightness(0%)有類似的效果，不過我看到的是更多的暗灰色。 ~~~ img { -webkit-filter: contrast(0%); } ~~~  [觀看演示](http://jsbin.com/ohuhek/8) ? ? ??現在我們將比例提高到2000%。 ~~~ img { -webkit-filter: contrast(2000%); } ~~~  [觀看演示](http://jsbin.com/ohuhek/10) ? ? ??為了好玩，讓我們創建一個Nettuts +標志跳動的矩陣版本。 我們將結合CSS3動畫和濾鏡。 ~~~ img { -webkit-animation: bluePill 1s alternate infinite; } @-webkit-keyframes bluePill { 0% { -webkit-filter: contrast(2000%); } 100% { -webkit-filter: contrast(100%); } } ~~~ [觀看演示](http://jsbin.com/ohuhek/12) **反轉** ? ? ??Mac用戶請按下Control + Option + Command + 8 。請注意它是如何反轉屏幕顯示的（當然你可以注意到）。每當深夜當在電腦上閱讀，眼睛酸痛時我就采用這一招。 ? ? ??將invert濾鏡設置為100%，就可以達到相同的效果。 ~~~ img { -webkit-filter: invert(100%); } ~~~  [觀看演示](http://jsbin.com/ohuhek/13) ? ? ??請注意，0％會保持原圖不變。 ? ? ??現在，從技術角度來說，你可以在網站的body元素上應用這個濾鏡。 然而你會發現頁面顯示相當慢，并且無法上下滾動。 除非是為了娛樂，否則不要這樣做。  **飽和度** ? ? ??除了設置grayscale(100%)之外，我們還可以將圖像去飽和度來達到相似的效果。 ? ? ??在這種情況下，100％是不變的狀態，你可以增加或減少這個值。 因此，減少到0％將會從圖像中刪除所有的顏色。 ~~~ img { -webkit-filter: saturate(0%); } ~~~  [查看演示](http://jsbin.com/ohuhek/15) ? ? ??或者將值增大到700％：  [觀看演示](http://jsbin.com/ohuhek/16) **這是現在所有的內容** ? ? ??請繼續在下周關注這篇文章。 由于這些技術仍然非常新，我們都需要時間來弄清楚如何使用它們。 當我了解[更多內容](https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html)時我會保持更新這篇文章。