1. Web
  2. CSS
  3. filter

filter

Baseline 廣泛可用 *

此特性已非常成熟，可在多種裝置和瀏覽器版本上使用。自 ⁨2016 年 9 月⁩以來，它已在各大瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

filter CSS 屬性可為元素應用模糊或顏色偏移等圖形效果。濾鏡通常用於調整影像、背景和邊框的渲染效果。

有幾個可用的函式，例如 blur() 和 contrast()，可以幫助你實現預定義的效果。

試一試

filter: url("/shared-assets/images/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

<section id="default-example">
  <div class="example-container">
    <img
      id="example-element"
      src="/shared-assets/images/examples/firefox-logo.svg"
      width="200" />
  </div>
</section>

.example-container {
  background-color: white;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-element {
  flex: 1;
  padding: 30px;
}

語法

css
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* Multiple filters */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

引用 SVG 濾鏡

你可以使用 url() 來引用 SVG 濾鏡元素。要引用 SVG <filter> 元素，請使用以下語法：

css
filter: url("file.svg#filter-element-id");

函式

filter 屬性可以指定為 none 或下面列出的一個或多個函式。如果任何函式的引數無效，該函式將返回 none。除非另有說明，接受百分比值（如 34%）的函式也接受小數表示的值（如 0.34）。

當 filter 屬性值包含多個函式時，濾鏡將按順序應用。

blur()

對輸入影像應用高斯模糊。

css
filter: blur(5px);
brightness()

對輸入影像應用線性乘數，使其看起來更亮或更暗。值是效果的線性乘數，0% 會建立完全黑色的影像，100% 沒有效果，超過 100% 的值會使影像變亮。

css
filter: brightness(2);
contrast()

調整輸入影像的對比度。值為 0% 會使影像變為灰色，100% 沒有效果，超過 100% 的值會增加對比度。

css
filter: contrast(200%);
drop-shadow()

將引數 <shadow> 作為投影應用，投影會跟隨影像的輪廓。投影的語法類似於 <box-shadow>（在 CSS 背景和邊框模組中定義），但 inset 關鍵字和 spread 引數是不允許的。與所有 filter 屬性值一樣，drop-shadow() 之後的任何濾鏡都會應用於該投影。

css
filter: drop-shadow(16px 16px 10px black);
grayscale()

將影像轉換為灰度圖。值為 100% 是完全灰度。初始值 0% 使輸入保持不變。0% 和 100% 之間的值會對效果產生線性乘數影響。

css
filter: grayscale(100%);
hue-rotate()

應用色相旋轉。<angle> 值定義了輸入樣本將在色相環上調整的度數。值為 0deg 使輸入保持不變。

css
filter: hue-rotate(90deg);
invert()

反轉輸入影像中的樣本。值為 100% 會完全反轉影像。值為 0% 使輸入保持不變。0% 和 100% 之間的值會對效果產生線性乘數影響。

css
filter: invert(100%);
opacity()

應用透明度。0% 使影像完全透明，100% 使影像保持不變。

css
filter: opacity(50%);
saturate()

使影像飽和，0% 為完全不飽和，100% 使影像保持不變，超過 100% 的值會增加飽和度。

css
filter: saturate(200%);
sepia()

將影像轉換為深褐色，值為 100% 使影像完全變為深褐色，0% 不做任何改變。

css
filter: sepia(100%);

組合函式

你可以組合任意數量的函式來操控渲染。濾鏡會按照宣告的順序應用。以下示例增強了影像的對比度和亮度：

css
filter: contrast(175%) brightness(103%);

插值

在動畫中，如果開始和結束的濾鏡都具有相同長度且不含 <url> 的函式列表，並且順序相同，那麼它們的每個濾鏡函式都將根據該濾鏡函式的特定規則進行插值。

如果濾鏡列表的長度不同，則會將較長列表中缺失的等效濾鏡函式新增到較短列表的末尾。新增的函式使用其初始的、無濾鏡修改的值。然後，所有列出的濾鏡都將根據其濾鏡函式的特定規則進行插值。否則，將使用離散插值。

正式定義

初始值none
應用於所有元素；在 SVG 中，它適用於除 <defs> 元素外的容器元素以及所有圖形元素
繼承性否
計算值同指定值
動畫型別一個濾鏡函式列表

正式語法

filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

示例

應用濾鏡函式

filter 屬性應用於第二張圖片，使其影像和邊框都變灰並模糊。

css
img {
  border: 5px solid yellow;
}
/* Gray the second image by 40% and blur by 5px */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

重複使用濾鏡函式

濾鏡函式按其出現的順序應用。同一個濾鏡函式可以重複使用。

css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}

濾鏡是按順序應用的。這就是為什麼投影的顏色不相同：第一個投影的色相被 hue-rotate() 函式改變了，而第二個則沒有。

規範

規範
濾鏡效果模組第 1 級
# FilterProperty

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者們共同完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.