CSS filter 屬性

定義和用法

filter 屬性定義元素（通常是 <img>）的視覺效果（如模糊和飽和度）。

另請參閱：

CSS 教程：CSS 圖像

HTML DOM 參考手冊：filter 屬性

實例

把所有圖像都改為黑白（100% 灰色）：

img {
  filter: grayscale(100%);
}

親自試一試

提示：可以在頁面下方找到更多 TIY 實例。

CSS 語法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示：如需使用多個濾鏡，請用空格分隔每個濾鏡（參見頁面下方的更多實例）。

技術細節

默認值： none
繼承： 否
動畫制作： 支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.filter="grayscale(100%)"

濾鏡函數

注釋：使用百分比值（例如 75％）的濾鏡，也接受該值是十進制（例如 0.75）。

濾鏡 描述
none 默認值。規定無效果。
blur(px)

對圖像應用模糊效果。較大的值將產生更多的模糊。

如果為指定值，則使用 0。
brightness(%)

調整圖像的亮度。

  • 0％ 將使圖像完全變黑。
  • 默認值是 100％，代表原始圖像。
  • 值超過 100％ 將提供更明亮的結果。
contrast(%)

調整圖像的對比度。

  • 0％ 將使圖像完全變黑。
  • 默認值是 100％，代表原始圖像。
  • 超過 100％ 的值將提供更具對比度的結果。
drop-shadow(h-shadow v-shadow blur spread color)

對圖像應用陰影效果。

可能的值：

  • h-shadow - 必需。指定水平陰影的像素值。負值會將陰影放置在圖像的左側。
  • v-shadow - 必需。指定垂直陰影的像素值。負值會將陰影放置在圖像上方。

blur -可選。這是第三個值，單位必須用像素。為陰影添加模糊效果。值越大創建的模糊就越多（陰影會變得更大更亮）。不允許負值。如果未規定值，會使用 0（陰影的邊緣很銳利）。

spread - 可選。這是第四個值，單位必須用像素。正值將導致陰影擴展并增大，負值將導致陰影縮小。如果未規定值，會使用 0（陰影與元素的大小相同）。

注釋：Chrome、Safari 和 Opera，也許還有其他瀏覽器，不支持第 4 個長度；如果添加，則不會呈現。

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

這個例子創建了紅色的陰影，水平和垂直方向均為 8px，帶有 10px 的模糊效果：

filter: drop-shadow(8px 8px 10px red);

提示：這個濾鏡類似 box-shadow 屬性。
grayscale(%)

將圖像轉換為灰階。

  • 0% (0) 是默認值，代表原始圖像。
  • 100％ 將使圖像完全變灰（用于黑白圖像）。

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

在圖像上應用色相旋轉。該值定義色環的度數。默認值為 0deg，代表原始圖像。

注釋：最大值是 360deg。
invert(%)

反轉圖像中的樣本。

  • 0% (0) 是默認值，代表原始圖像。
  • 100％將使圖像完全反轉。

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

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

  • 0% 為完全透明。
  • 100% (1) 是默認值，代表原始圖像（不透明）。

注釋：不允許負值。

提示：這個濾鏡類似 opacity 屬性。
saturate(%)

設置圖像的飽和度。

  • 0% (0) will make the image completely un-saturated.
  • 100% is default and represents the original image.
  • Values over 100% provides super-saturated results.

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

將圖像轉換為棕褐色。

  • 0% (0) 是默認值，代表原始圖像。
  • 100％ 將使圖像完全變為棕褐色。

注釋：不允許負值。
url()

url() 函數接受規定 SVG 濾鏡的 XML 文件的位置，并且可以包含指向特定濾鏡元素的錨點。實例：

filter: url(svg-url#element-id)
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

更多實例

模糊實例

為圖像添加模糊效果：

img {
  filter: blur(5px);
}

親自試一試

模糊實例 2

應用模糊的背景圖片：

img.background {
  filter: blur(35px);
}

親自試一試

亮度實例

調整圖像的亮度：

img {
  filter: brightness(200%);
}

親自試一試

對比度實例

調整圖像的對比度：

img {
  filter: contrast(200%);
}

親自試一試

陰影實例

為圖像應用陰影效果：

img {
  filter: drop-shadow(8px 8px 10px gray);
}

親自試一試

灰階實例

將圖像轉換為灰階：

img {
  filter: grayscale(50%);
}

親自試一試

色相旋轉實例

在圖像上應用色相旋轉：

img {
  filter: hue-rotate(90deg);
}

親自試一試

反轉實例

反轉圖像中的樣本：

img {
  filter: invert(100%);
}

親自試一試

不透明度實例

設置圖像的不透明度級別：

img {
  filter: opacity(30%);
}

親自試一試

飽和度實例

調整圖像的飽和度：

img {
  filter: saturate(800%);
}

親自試一試

棕褐色實例

將圖像轉換為棕褐色：

img {
  filter: sepia(100%);
}

親自試一試

使用多重濾鏡

要使用多個濾鏡，請用空格分隔每個濾鏡。請注意，順序很重要（例如在 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);
}

親自試一試

瀏覽器支持

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

帶 -webkit- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

注釋：較舊版本的 Internet Explorer（4. 0到 8.0）支持已棄用的非標準 "filter" 屬性。當需要 IE8 及更低版本的支持時，主要用于不透明度。