例
改變圖像為黑色和白色的顏色(100% grayscale) ：
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
試一試» 定義和用法
該過濾器屬性增加了視覺效果(like blur and saturation)到圖像。
瀏覽器支持
在表中的數字規定，完全支持該財產瀏覽器版本。
數字後面的Webkit指定的前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| filter | 18.0的Webkit | 13.0 | 35.0 | 6.0的Webkit | 15.0的Webkit |
注：瀏覽器，Safari和Opera支持替代方案，WebkitFilter財產。
句法
返回過濾器屬性：
object .style.filter設置過濾器屬性：
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
過濾功能
注意：使用百分比值濾波器(ie 75%)同時接受的價值為十進制(ie 0.75)
| 過濾 | 描述 |
|---|---|
| 沒有 | 指定無影響 |
| blur( px ) | 應用模糊效果的圖像。 較大的值會產生更多的模糊。 如果未指定值，則使用0。 |
| brightness( % ) | 調節圖像的亮度。 0％將會使圖像全黑。 100％ (1)是默認的，表示原始圖像。 超過100％的值將提供更明亮的效果。 |
| contrast( % ) | 調整圖像的對比度。 0％將會使圖像全黑。 100％ (1)是默認的，表示原始圖像。 超過100％的值將提供結果與對比度較低。 |
| 滴shadow( h-shadow v-shadow blur spread color ) | 適用陰影效果的圖像。 可能的值： H-陰影 -必需。 指定水平陰影的像素值。 負值陰影放置到圖像的左側。 V-陰影 -必需。 指定垂直陰影的像素值。 負值放置圖像上面的陰影。 模糊 -可選。 這是第三個價值，而且必須以像素為單位。 添加一個模糊效果的陰影。 較大的值會產生多個模糊（陰影變得更大和更亮）。 負值是不允許的。 如果沒有指定值，0被使用（陰影的邊緣是鋒利的）。 傳播 -可選。 這是第四個價值，而且必須以像素為單位。 正值將使陰影擴大和壯大規模，負值將導致陰影萎縮。 如果未指定，這將是0 (the shadow will be the same size as the element) 。 注：瀏覽器，Safari和Opera，也許其他的瀏覽器不支持此第四長度; 如果添加也不會呈現。 顏色：可選。 增加了一個顏色的陰影。 如果沒有指定，顏色取決於瀏覽器(often black) 。 提示：此過濾器是類似的box-shadow屬性。 |
| grayscale( % ) | 轉換為灰度圖像。 0％ (0)是默認的，表示原始圖像。 100％會使影像完全灰化(used for black and white images) 。 注意：負值是不允許的。 |
| 色調- rotate( deg ) | 應用圖像上的色調旋轉。 該值定義沿色環的圖像樣本將被調整的度數。 0deg是默認，並表示原始圖像。 注：最大值為360deg。 |
| invert( % ) | 反轉圖像中的樣本。 0％ (0)是默認的，表示原始圖像。 100％將會使圖像完全反轉。 注意：負值是不允許的。 |
| opacity( % ) | 設置圖像的透明度級別。 不透明度級別描述透明度級別，其中： 0％是完全透明的。 100％ (1)是默認的，表示原始圖像(no transparency) 。 注意：負值是不允許的。 提示：此過濾器類似於不透明財產。 |
| saturate( % ) | 飽和的圖像。 0％ (0)將會使圖像完全不飽和的。 100％是默認和表示原始圖像。 超過100％的值提供了超飽和的結果。 注意：負值是不允許的。 |
| sepia( % ) | 將圖像轉換為棕褐色。 0％ (0)是默認的，表示原始圖像。 100％將會使圖像完全棕褐色。 注意：負值是不允許的。 |
技術細節
| CSS版本 | CSS3 |
|---|
相關頁面
CSS參考： filter property
<Style對象