例
將所有圖像，以黑色和白色的顏色(100% gray) ：
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
提示：更多的"Try it Yourself"下面的例子。
定義和用法
該過濾器屬性定義的視覺效果(like blur and saturation)到一個元素(often <img>)
| 默認值： | 沒有 |
|---|---|
| 遺傳： | no |
| 動畫： | yes. Read about animatable |
| 版： | CSS3 |
| JavaScript語法： | object .style.WebkitFilter="grayscale(100%)" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
數字後面-webkit-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
注：Internet Explorer的舊版本(4.0 to 8.0)的支持非標準"filter"已被棄用財產。 這是主要用於不透明需要支持時，從IE8和向下。
CSS語法
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();提示：要使用多個過濾器，每個濾波器用空格分隔(See "More Examples" below)
過濾功能
注意：使用百分比值濾波器(ie 75%)也接受該值作為小數(ie 0.75)
| 過濾 | 描述 | 播放 |
|---|---|---|
| none | 默認值。 指定無影響 | 播放 ” |
| blur( px ) | 應用模糊效果的圖像。 較大的值會產生更多的模糊。 如果沒有指定值，則使用0。 | 播放 ” |
| brightness( % ) | 調整圖像的亮度。 0％將使圖像全黑。 100％ (1)是默認的，表示原始圖像。 超過100％的值將提供更亮的結果。 | 播放 ” |
| contrast( % ) | 調整圖像的對比度。 0％將使圖像全黑。 100％ (1)是默認的，表示原始圖像。 超過100％的值將提供的結果與較少的對比。 | 播放 ” |
| drop-shadow( h-shadow v-shadow blur spread color ) | 適用陰影效果的圖像。 可能的值： H-陰影 -必需。 指定水平陰影的像素值。 負值陰影放置在圖像的左側。 V-陰影 -必需。 指定垂直陰影的像素值。 負值放置圖像上方的陰影。 模糊 -可選。 這是第三個價值，而且必須以像素為單位。 添加一個模糊效果的陰影。 較大的值會產生更多的模糊（陰影變得更大，更輕）。 負值是不允許的。 如果沒有指定值，默認值為0（陰影的邊緣銳利）。 傳播 -可選。 這是第四個值，並且必須在像素。 正值將使陰影擴展和增長更大，負值將使陰影收縮。 如果未指定，這將是0 (the shadow will be the same size as the element) 。 注：瀏覽器，Safari和Opera，也許其他的瀏覽器不支持此4的長度; 如果添加的話也不會呈現。 顏色 -可選。 增加了一個顏色的影子。 如果未指定，則顏色取決於瀏覽器(often black) 。 創造一個紅影，其水平和垂直方向為8像素大，與10px的的模糊效果的例子： 過濾器：下拉陰影（8像素8像素10px的紅色）; 提示：該過濾器類似於箱陰影財產。 | 播放 ” |
| grayscale( % ) | 轉換為灰度圖像。 0％ (0)是默認的，表示原始圖像。 100％將會使圖像完全灰化(used for black and white images) 。 注意：負值是不允許的。 | 播放 ” |
| hue-rotate( deg ) | 應用於所述圖像上的色調旋轉。 該值定義沿色環圖像樣本將被調整的度數。 0deg是默認值，表示原始圖像。 注：最大值為360deg。 | 播放 ” |
| invert( % ) | 反轉圖像中的樣本。 0％ (0)是默認的，表示原始圖像。 100％將使圖像完全反轉。 注意：負值是不允許的。 | 播放 ” |
| opacity( % ) | 設置圖像的透明度級別。 不透明度級別描述的透明度級，其中： 0％是完全透明的。 100％ (1)是默認的，表示在原始圖像(no transparency) 。 注意：負值是不允許的。 提示：該過濾器類似於不透明財產。 | 播放 ” |
| saturate( % ) | 飽和的圖像。 0％ (0)將使圖像完全不飽和的。 100％是默認和表示原始圖像。 超過100％的值提供超飽和的結果。 注意：負值是不允許的。 | 播放 ” |
| sepia( % ) | 將圖像轉換為棕褐色。 0％ (0)是默認的，表示原始圖像。 100％將使圖像完全棕褐色。 注意：負值是不允許的。 | 播放 ” |
| url() | 的url()函數採用指定的SVG濾波器的XML文件的位置，並且可包括一個錨固到一個特定的過濾器元件。 例： 過濾： url(svg-url#element-id) | |
| initial | 將此屬性設置為默認值。 閱讀關於初始 | |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
更多示例
模糊示例
應用模糊效果的圖像：
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
亮度示例
調整圖像的亮度：
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
對比實例
調節圖像的對比度：
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
陰影示例
套用陰影效果的圖像：
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
灰度示例
將圖像轉換為灰度：
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
色相旋轉示例
應用該圖像上的色調旋轉：
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
反例
反轉圖像中的樣本：
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
透明度示例
設置圖像的不透明度級別：
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
飽和例
飽和圖像：
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
棕褐色例
將圖像轉換為棕褐色：
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
合併過濾器/多個過濾器
要使用多個過濾器，每個濾波器用空格分隔。
注：順序很重要(ie using grayscale()後， sepia()將導致一個完全灰度圖像）。
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
所有篩選
所有濾鏡功能演示：
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} 試一試» 相關頁面
HTML DOM參考： filter property