Style Filter Attribute

Definition and Usage

filter Magdagdag ng epekto ng pagpipitaka sa imahe (gaya ng pagbabulok at saturation).

Para sa ibang tignan:

CSS Reference Manual:Filter Attribute

Example

Baguhin ang kulay ng imahe ng puti at black (100% grasyate):

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

Subukan Lang!

Syntax

I-babalik ang filter attribute:

object.style.filter

I-set ang filter attribute:

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

Filter Function

Komento:Ang filter na ginagamit sa pamantayan ng porsyento (gaya ng 75%) ay tinatanggap din ang dekimal na halaga (gaya ng 0.75).

Filter Paglalarawan
none Tinatatakang walang epekto.
blur(px)

Tinagpo ang epekto ng magiging malabong sa imahe. Ang mas malaking halaga ay magbibigay ng mas malabong epekto.

如果未规定值，则使用 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（阴影将与元素大小相同）。

Komento:Chrome、Safari 和 Opera，可能还有其他浏览器，不支持第 4 种长度；如果添加，它将不会呈现。

color：可选。为阴影添加颜色。如果未规定，颜色取决于浏览器（通常为黑色）。

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

将图像转换为灰度。

0% (0) ay ang default na halaga, na nangangahulugan na ang orihinal na larawan.

100% 将使图像完全变灰（用于黑白图像）。

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

在图像上应用色调旋转。该值定义图像样本将被调整的围绕色环的度数。

0deg 是默认值，表示原始图像。

Komento:最大值为 360 度。
invert(%)

反转图像中的样本。

0% (0) ay ang default na halaga, na nangangahulugan na ang orihinal na larawan.

100% 将使图像完全反转。

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

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

0% 是完全透明的。

100% (1) 是默认值，表示原始图像（无透明度）。

Komento:不允许负值。

提示：此 filter 类似于 opacity 属性。
saturate(%)

调整图像饱和度。

0% (0) 将使图像完全不饱和。

100% 是默认值，表示原始图像。

超过 100% 的值会提供过饱和的结果。

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

Ihawak ang larawan sa kayumanggi.

0% (0) ay ang default na halaga, na nangangahulugan na ang orihinal na larawan.

100% ay magiging ganap na kayumanggi ang larawan.

Komento:不允许负值。

技术细节

CSS 版本： CSS3

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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