CSS filter 屬性
提示：更多“自己嘗試”的示例在下方。
定義和用法
filter 屬性定義了應用於元素（通常是 <img>）的視覺效果（如模糊和飽和度）。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| 篩選器 | 53 | 13 | 35 | 9 | 40 |
CSS 語法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
提示：要使用多個濾鏡，請用空格分隔每個濾鏡（請參閱下面的“更多示例”）。
濾鏡函式
注意：使用百分比值（例如75%）的濾鏡也接受十進位制值（例如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-shadow - 必填。指定水平陰影的畫素值。負值將陰影放置在影像的左側。 v-shadow - 必填。指定垂直陰影的畫素值。負值將陰影放置在影像的上方。 blur - 可選。這是第三個值，必須以畫素為單位。為陰影新增模糊效果。值越大，模糊程度越高（陰影變得更大更亮）。不允許負值。如果未指定值，則使用0（陰影邊緣銳利）。 spread - 可選。這是第四個值，必須以畫素為單位。正值會導致陰影展開並變大，負值會導致陰影縮小。如果未指定，則為0（陰影將與元素大小相同）。 注意：Chrome、Safari 和 Opera 以及其他瀏覽器可能不支援此第四個長度；如果新增，它將不會渲染。 color - 可選。為陰影新增顏色。如果未指定，則顏色取決於瀏覽器（通常為黑色）。 建立紅色陰影的示例，水平和垂直方向均為8px，模糊效果為10px filter: drop-shadow(8px 8px 10px red); 提示：此濾鏡類似於box-shadow屬性。 |
演示 ❯ |
| grayscale(%) | 將影像轉換為灰度。 0% (0) 是預設值，表示原始影像。 100% 會使影像完全變為灰色（用於黑白影像）。 注意：不允許負值。 |
演示 ❯ |
| hue-rotate(deg) | 對影像應用色相旋轉。該值定義了影像樣本在色輪周圍調整的度數。0deg是預設值，表示原始影像。 注意：最大值為360度。 |
演示 ❯ |
| invert(%) | 反轉影像中的樣本。 0% (0) 是預設值，表示原始影像。 100% 會使影像完全反轉。 注意：不允許負值。 |
演示 ❯ |
| opacity(%) | 設定影像的不透明度級別。不透明度級別描述了透明度級別，其中 0% 完全透明。 100% (1) 是預設值，表示原始影像（無透明度）。 注意：不允許負值。 提示：此濾鏡類似於opacity屬性。 |
演示 ❯ |
| saturate(%) | 使影像飽和。 0% (0) 會使影像完全不飽和。 100% 是預設值，表示原始影像。 超過100%的值會提供超飽和的效果。 注意：不允許負值。 |
演示 ❯ |
| sepia(%) | 將影像轉換為棕褐色。 0% (0) 是預設值，表示原始影像。 100% 會使影像完全變為棕褐色。 注意：不允許負值。 |
演示 ❯ |
| url() | url() 函式接受一個XML檔案的位置，該檔案指定SVG濾鏡，並且可能包含指向特定濾鏡元素的錨點。示例 filter: url(svg-url#element-id) |
|
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
使用多個濾鏡
要使用多個濾鏡，請用空格分隔每個濾鏡。請注意，順序很重要（即在 sepia() 之後使用 grayscale() 將導致影像完全變為灰色）
img {
filter: contrast(200%) brightness(150%);
}
自己動手試一試 »
所有濾鏡
所有濾鏡函式的演示
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(0.30);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px green);
}
自己動手試一試 »
相關頁面
CSS教程：CSS影像
HTML DOM參考：filter屬性
