修改所有圖檔的顔色為黑白 (100% 灰階):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
預設值:
none
繼承:
no
動畫支援:
是。詳細可查閱 CSS 動畫
版本:
CSS3
JavaScript 文法:
object.style.WebkitFilter="grayscale(100%)"
表格中的數字表示支援該方法的第一個浏覽器的版本号。
緊跟在數字後面的 -webkit- 為指定浏覽器的字首。
屬性
filter
18.0 -webkit-
不支援
35.0
6.0 -webkit-
15.0 -webkit-
注意: 舊版 Internet Explorer 浏覽器(4.0 to 8.0) 支援的非标準 "filter" 屬性已被廢棄。 IE8 及更低版本浏覽器通常使用 opacity 屬性。
提示: 使用空格分隔多個濾鏡。
注意: 濾鏡通常使用百分比 (如：75%), 當然也可以使用小數來表示 (如：0.75)。
Filter 描述 none 預設值，沒有效果。 blur(px) 給圖像設定高斯模糊。"radius"一值設定高斯函數的标準差，或者是螢幕上以多少像素融在一起， 是以值越大越模糊；
如果沒有設定值，則預設是0；這個參數可設定css長度值，但不接受百分比值。 brightness(%) 給圖檔應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，預設是1。 contrast(%) 調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味着會運用更低的對比。若沒有設定值，預設是1。 drop-shadow(h-shadow v-shadow blur spread color)
給圖像設定一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顔色畫出的遮罩圖的偏移版本。 函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些浏覽器為了更好的性能會提供硬體加速。<code><shadow>參數如下：</code>
<code><dl> <dt> <offset-x> <offset-y> (必須) </dt> <dd>這是設定陰影偏移量的兩個 <length>值. <offset-x> 設定水準方向距離. 負值會使陰影出現在元素左邊. <offset-y>設定垂直距離.負值會使陰影出現在元素上方。檢視<length>可能的機關. 如果兩個值都是0, 則陰影出現在元素正後面 (如果設定了 <code><blur-radius> and/or <code><spread-radius>，會有模糊效果).</code></code> </dd> <code><code> <dt> <blur-radius> (可選) </dt> <dd>這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，預設是0 (則陰影的邊界很銳利).</dd> <dt> <spread-radius> (可選) </dt> <dd>這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，預設是0 (陰影會與元素一樣大小). 注意: Webkit, 以及一些其他浏覽器 不支援第四個長度，如果加了也不會渲染。</dd> <dt> </dt> <dt> <color> (可選) </dt> <dd>檢視 <color>該值可能的關鍵字和标記。若未設定，顔色值基于浏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顔色值省略，WebKit中陰影是透明的。</dd> </code></code> </dl> <code><code> </code></code></code>
grayscale(%)
将圖像轉換為灰階圖像。值定義轉換的比例。值為100%則完全轉為灰階圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0；
hue-rotate(deg)
給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設定，預設值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。
invert(%)
反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設定，值預設是0。
opacity(%)
轉化圖像的透明程度。值定義轉換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當于圖像樣本乘以數量。 若值未設定，值預設是1。該函數與已有的opacity屬性很相似，不同之處在于通過filter，一些浏覽器為了提升性能會提供硬體加速。
saturate(%)
轉換圖像飽和度。值定義轉換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設定，值預設是1。
sepia(%)
将圖像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0；
url()
URL函數接受一個XML檔案，該檔案設定了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。
例如：
initial
設定屬性為預設值，可參閱： CSS initial 關鍵字
inherit 從父元素繼承該屬性，可參閱：CSS inherit 關鍵字
圖檔使用高斯模糊效果：
-webkit-filter: blur(5px); /* Chrome, Safari,
filter: blur(5px);
使圖檔變亮:
-webkit-filter: brightness(200%); /* Chrome, Safari,
filter: brightness(200%);
調整圖像的對比度:
-webkit-filter: contrast(200%); /* Chrome, Safari,
filter: contrast(200%);
給圖像設定一個陰影效果:
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
filter: drop-shadow(8px 8px 10px red);
将圖像轉換為灰階圖像:
-webkit-filter: grayscale(50%); /* Chrome, Safari,
filter: grayscale(50%);
給圖像應用色相旋轉:
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
filter: hue-rotate(90deg);
反轉輸入圖像:
-webkit-filter: invert(100%); /* Chrome, Safari,
filter: invert(100%);
轉化圖像的透明程度:
-webkit-filter: opacity(30%); /* Chrome, Safari,
filter: opacity(30%);
轉換圖像飽和度:
-webkit-filter: saturate(800%); /* Chrome, Safari,
filter: saturate(800%);
将圖像轉換為深褐色:
-webkit-filter: sepia(100%); /* Chrome, Safari,
filter: sepia(100%);
使用多個濾鏡，每個濾鏡使用空格分隔。
注意: 順序是非常重要的 (例如使用 grayscale() 後再使用
sepia()将産生一個完整的灰階圖檔)。
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
filter: contrast(200%) brightness(150%);
以下執行個體示範了所有濾鏡的使用方法:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
.contrast {
contrast(180%);
filter: contrast(180%);
.grayscale {
grayscale(100%);
filter: grayscale(100%);
.huerotate {
hue-rotate(180deg);
filter: hue-rotate(180deg);
.invert {
invert(100%);
filter: invert(100%);
.opacity {
opacity(50%);
filter: opacity(50%);
.saturate {
saturate(7);
filter: saturate(7);
.sepia {
sepia(100%);
filter: sepia(100%);
.shadow {
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
HTML DOM 參考手冊: Style filter 屬性