Atrybut filter w CSS

定义和用法

filter属性定义元素（通常是<img>）的视觉效果（如模糊和饱和度）。

另请参阅：

CSS教程：CSS图像

HTML DOM参考手册：filter属性

实例

将所有图像改为黑白（100%灰色）：

img {
  filter: grayscale(100%);
}

Spróbuj sam

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

CSS语法

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

提示：Aby użyć wielu filtrów, oddziel każdy filtr spacją (zobacz więcej przykładów poniżej strony).

Szczegóły techniczne

Domyślna wartość: none
Inherytacja: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty związane z animacją。
Wersja: CSS3
Gramatyka JavaScript: object.style.filter="grayscale(100%)"

Funkcja filtru

Uwaga:Używaj procentowych wartości filtru (np. 75%), akceptowane są również wartości dziesiętne (np. 0.75).

Filtr Opis
none Domyślna wartość. Określ brak efektu.
blur(px)

Zastosuj efekt rozmycia do obrazu. Większe wartości tworzą więcej rozmycia.

Jeśli wartość nie jest określona, użyj 0.
brightness(%)

Dostosuj jasność obrazu.

  • 0% sprawi, że obraz całkowicie zniknie.
  • Domyślna wartość to 100%, reprezentuje oryginalny obraz.
  • Wartości powyżej 100% zapewnią jaśniejsze wyniki.
contrast(%)

Dostosuj kontrast obrazu.

  • 0% sprawi, że obraz całkowicie zniknie.
  • Domyślna wartość to 100%, reprezentuje oryginalny obraz.
  • Wartości powyżej 100% zapewnią bardziej kontrastujące wyniki.
drop-shadow(h-shadow v-shadow blur spread color)

Zastosuj efekt cienia do obrazu.

Możliwe wartości:

  • h-shadow - obowiązkowy. Określ wartość pikselową poziomego cienia. Wartość ujemna umieści cień po lewej stronie obrazu.
  • v-shadow - obowiązkowy. Określ wartość pikselową pionowego cienia. Wartość ujemna umieści cień nad obrazem.

blur - opcjonalny. To trzeci wartość, jednostka musi być w pikselach. Dodaj efekt rozmycia cienia. Wartość większa tworzy więcej rozmycia (cień staje się większy i jaśniejszy). Nie dozwolone ujemne wartości. Jeśli wartość nie jest określona, będzie używana 0 (krawędzie cienia są ostre).

spread - opcjonalny. To czwarty wartość, jednostka musi być w pikselach. Wartość dodatnia spowoduje rozszerzenie cienia i jego powiększenie, wartość ujemna spowoduje zmniejszenie cienia. Jeśli wartość nie jest określona, będzie używana 0 (cień ma taki sam rozmiar jak element).

Uwaga:Chrome, Safari i Opera, może również inne przeglądarki, nie obsługuje czwartego długości; jeśli zostanie dodany, nie zostanie wyświetlony.

color - opcjonalny. Dodaj kolor cienia. Jeśli nie jest określony, kolor zależy od przeglądarki (zwykle czarny).

Ten przykład tworzy czerwone cień, poziomo i pionowo 8px, z efektem rozmycia 10px:

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

提示：这个滤镜类似 box-shadow 属性。
grayscale(%)

将图像转换为灰阶。

  • 0% (0) 是默认值，代表原始图像。
  • 100％ 将使图像完全变灰（用于黑白图像）。

Uwaga:不允许负值。
hue-rotate(deg)

在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。

Uwaga:最大值是 360deg。
invert(%)

反转图像中的样本。

  • 0% (0) 是默认值，代表原始图像。
  • 100％将使图像完全反转。

Uwaga:不允许负值。
opacity(%)

设置图像的不透明度级别。opacity-level 描述了透明度级别，其中：

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

Uwaga:不允许负值。

提示：这个滤镜类似 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.

Uwaga:不允许负值。
sepia(%)

将图像转换为棕褐色。

  • 0% (0) 是默认值，代表原始图像。
  • 100％ 将使图像完全变为棕褐色。

Uwaga:不允许负值。
url()

url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例：

filter: url(svg-url#element-id)
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

更多实例

模糊实例

为图像添加模糊效果：

img {
  filter: blur(5px);
}

Spróbuj sam

模糊实例 2

应用模糊的背景图片：

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

Spróbuj sam

亮度实例

调整图像的亮度：

img {
  filter: brightness(200%);
}

Spróbuj sam

对比度实例

调整图像的对比度：

img {
  filter: contrast(200%);
}

Spróbuj sam

阴影实例

为图像应用阴影效果：

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

Spróbuj sam

Przykład odcieni szarości

Konwertuj obraz na odcienie szarości:

img {
  filter: grayscale(50%);
}

Spróbuj sam

Przykład rotacji tonacji

Zastosuj rotację tonacji barw na obrazie:

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

Spróbuj sam

Przykład odwrócenia

Odwróć próbki w obrazie:

img {
  filter: invert(100%);
}

Spróbuj sam

Przykład przezroczystości

Ustaw poziom przezroczystości obrazu:

img {
  filter: opacity(30%);
}

Spróbuj sam

Przykład nasycenia

Dostosuj nasycenie obrazu:

img {
  filter: saturate(800%);
}

Spróbuj sam

Przykład brązowego

Konwertuj obraz na brązowy:

img {
  filter: sepia(100%);
}

Spróbuj sam

Użycie wielokrotnych filtrów

Aby użyć wielu filtrów, oddziel je spacjami. Proszę zauważyć, że kolejność ma znaczenie (np. użycie grayscale() po sepia() spowoduje uzyskanie całkowicie szarego obrazu):

img {
  filter: contrast(200%) brightness(150%);
}

Spróbuj sam

Wszystkie filtry

Pokazuj wszystkie funkcje filtrów:

.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);
}

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Liczby z -webkit- oznaczają pierwszą wersję używającą prefiksu.

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-

Uwaga:Starsze wersje Internet Explorera (od 4.0 do 8.0) obsługuje przestarzałe, niestandardowe atrybuty "filter". Gdy potrzebna jest obsługa IE8 i starszych wersji, głównie do przezroczystości.