Style filter 屬性

定義和用法

filter 屬性為圖像添加視覺效果（如模糊和飽和度）。

另請參閱：

CSS 參考手冊：filter 屬性

實例

將圖像的顏色更改為黑白（100% 灰度）：

document.getElementById("myImg").style.filter = "grayscale(100%)";

親自試一試

語法

返回 filter 屬性：

object.style.filter

設置 filter 屬性：

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter 函數

注釋：使用百分比值（如 75%）的 filter 也接受十進制值（即 0.75）。

Filter 描述
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，可能還有其他瀏覽器，不支持第 4 種長度；如果添加，它將不會呈現。

color：可選。為陰影添加顏色。如果未規定，顏色取決于瀏覽器（通常為黑色）。

提示：此 filter 類似于 box-shadow 屬性。
grayscale(%)

將圖像轉換為灰度。

0% (0) 是默認值，表示原始圖像。

100% 將使圖像完全變灰（用于黑白圖像）。

注釋：不允許負值。
hue-rotate(deg)

在圖像上應用色調旋轉。該值定義圖像樣本將被調整的圍繞色環的度數。

0deg 是默認值，表示原始圖像。

注釋：最大值為 360 度。
invert(%)

反轉圖像中的樣本。

0% (0) 是默認值，表示原始圖像。

100% 將使圖像完全反轉。

注釋：不允許負值。
opacity(%)

設置圖像的不透明度級別。不透明度級別描述了透明度級別，其中：

0% 是完全透明的。

100% (1) 是默認值，表示原始圖像（無透明度）。

注釋：不允許負值。

提示：此 filter 類似于 opacity 屬性。
saturate(%)

調整圖像飽和度。

0% (0) 將使圖像完全不飽和。

100% 是默認值，表示原始圖像。

超過 100% 的值會提供過飽和的結果。

注釋：不允許負值。
sepia(%)

將圖像轉換為棕褐色。

0% (0) 是默認值，表示原始圖像。

100% 會使圖像完全呈棕褐色。

注釋：不允許負值。

技術細節

CSS 版本： CSS3

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0