CSS filter 属性

Definition and usage

Ang filter attribute ay nagtatalaga ng visual effect ng elemento (palikain <img>) (tulad ng blur at saturation).

Para sa karagdagang impormasyon, mangyaring tingnan:

CSS tutorial:CSS image

HTML DOM reference manual:Filter attribute

Sample

Gawing puti at puti lahat ng mga imahe (100% puti):

img {
  filter: grayscale(100%);
}

亲自试一试

Mga payo:Makakita ka ng mas maraming TIY sample sa ibaba ng pahina.

CSS grammar

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

Mga payo:Kung magiging gamit ng ilang filter, gamitin ang spat para sa bawat filter (tingnan ang mas maraming halimbawa sa ibaba ng pahina).

Technical details

Default value: none
Inheritance: No
Animation production: Supported. See also:Animation-related properties。
Version: CSS3
JavaScript syntax: object.style.filter="grayscale(100%)"

Filter function

注释：Gamitin ang percent na halaga (halimbawa 75%) na filter, tinatanggap din ang decimal na halaga (halimbawa 0.75).

Filter Paglalarawan
none Default na halaga. Tukoy na walang epekto.
blur(px)

Iapply ang epekto ng blur sa imahe. Ang mas malaking halaga ay magdudulot ng mas malaking epekto ng blur.

Kung tinukoy ang halaga, gamitin ang 0.
brightness(%)

Ayusin ang liwanag ng imahe.

  • 0% ay magiging ganap na madilim ang imahe.
  • Ang default na halaga ay 100%, na nagrerepresenta ng orihinal na imahe.
  • Ang halaga na higit sa 100% ay magbibigay ng mas mapula na resulta.
contrast(%)

Ayusin ang kontraste ng imahe.

  • 0% ay magiging ganap na madilim ang imahe.
  • Ang default na halaga ay 100%, na nagrerepresenta ng orihinal na imahe.
  • Ang halaga na higit sa 100% ay magbibigay ng mas malakas na kontraste sa resulta.
drop-shadow(h-shadow v-shadow blur spread color)

Iapply ang epekto ng shadow sa imahe.

Mga posibleng halaga:

  • h-shadow - required. Tukoy ang halaga ng horizontal shadow sa pixels. Ang nag-iisang halaga ay magdudulot ng paglagay ng shadow sa kaliwa ng imahe.
  • v-shadow - required. Tukoy ang halaga ng vertical shadow sa pixels. Ang nag-iisang halaga ay magdudulot ng paglagay ng shadow sa itaas ng imahe.

blur - optional. Ito ang ika-3 na halaga, ang yunit ay dapat sa pixels. Magdagdag ng epekto ng blur sa shadow. Ang mas malaking halaga ay magdudulot ng mas malaking epekto ng blur (ang shadow ay magiging mas malaki at mas mapula). Hindi pinapayagan ang nag-iisang halaga. Kung hindi tinukoy ang halaga, gagamitin ang 0 (ang gilid ng shadow ay magiging malinaw).

spread - optional. Ito ang ika-4 na halaga, ang yunit ay dapat sa pixels. Ang positibong halaga ay magdudulot ng paglawak at pagbigyan ng laki ng shadow, habang ang nag-iisang halaga ay magdudulot ng pagkabali ng shadow. Kung hindi tinukoy ang halaga, gagamitin ang 0 (ang shadow ay may parehong laki sa elemento).

注释：Chrome, Safari at Opera, maaring mayroon pang ibang browser na hindi sumusuporta sa ika-4 na haba; kung idadagdag, hindi ito magpakita.

color - optional. Magdagdag ng kulay sa shadow. Kung hindi tinukoy, ang kulay ay depende sa browser (karaniwan ay itim).

Ang halimbawa na ito ay gumawa ng kulay ng puti na shadow, horizontal at vertical na 8px, na may 10px na epekto ng blur:

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

Mga payo:Ang filter na ito ay katulad ng box-shadow attribute.
grayscale(%);

Convert the image to grayscale.

  • 0% (0) ay ang nauna na halaga, na nagrerepresenta ng orihinal na imahe.
  • 100% will make the image completely gray (used for black and white images).

注释：Hindi pinapayagan ang negatibong halaga.
hue-rotate(deg);

Apply a hue rotation to the image. This value defines the degrees of the color wheel. The default value is 0deg, representing the original image.

注释：The maximum value is 360deg.
invert(%);

Invert the samples in the image.

  • 0% (0) ay ang nauna na halaga, na nagrerepresenta ng orihinal na imahe.
  • 100% will make the image completely inverted.

注释：Hindi pinapayagan ang negatibong halaga.
opacity(%);

Set the opacity level of the image. The opacity-level describes the opacity level, where:

  • 0% is completely transparent.
  • 100% (1) is default and represents the original image (opaque).

注释：Hindi pinapayagan ang negatibong halaga.

Mga payo:Ang filter na ito ay katulad ng opacity attribute.
saturate(%);

Set the saturation of the image.

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

注释：Hindi pinapayagan ang negatibong halaga.
sepia(%);

I-convert ang imahe sa brownish.

  • 0% (0) ay ang nauna na halaga, na nagrerepresenta ng orihinal na imahe.
  • 100% ay magiging ganap na magka-brownish ang imahe.

注释：Hindi pinapayagan ang negatibong halaga.
url();

Ang url() function ay tumatanggap ng lokasyon ng XML file ng SVG filter at maaaring magkaroon ng anchor na tumututok sa tiyak na elemento ng filter. Halimbawa:

filter: url(svg-url#element-id);
initial I-set ang katangian na ito sa kanyang nauna na halaga. Tingnan ang initial。
inherit Inaabot mula sa magulang na elemento ang katangian na ito. Tingnan ang inherit。

Marami pang halimbawa

Halimbawa ng malinaw na epekto

Agad magdagdag ng epekto ng malinaw sa imahe:

img {
  filter: blur(5px);
}

亲自试一试

Halimbawa ng malinaw na epekto 2

Ipinapatong ang larawan ng background na may malinaw na epekto:

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

亲自试一试

Halimbawa ng liwanag

Ayusin ang liwanag ng imahe:

img {
  filter: brightness(200%);
}

亲自试一试

Halimbawa ng pagkaka-contrast

Ayusin ang pagkaka-contrast ng imahe:

img {
  filter: contrast(200%);
}

亲自试一试

Halimbawa ng lilim

Ipinapatong ang epekto ng lilim sa imahe:

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 及更低版本的支持时，主要用于不透明度。