Sifat filter gaya

Definisi dan penggunaan

filter Tambah kesan visual kepada imej (contoh buram dan kepadatan).

Lihat juga:

Panduan CSS:Sifat filter

Contoh

Tukar warna imej kepada hitam putih (100% keabuan):

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

Cuba sendiri

Syntax

Kembalikan sifat filter:

object.style.filter

Tetapkan sifat filter:

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

Function Filter

备注：Filter yang digunakan dengan persen (contoh 75%) menerima nilai desimal (iaitu 0.75).

Filter Description
none Tetapkan tiada kesan.
blur(px)

Tunjukkan kesan buram ke imej. Nilai yang besar akan menghasilkan buram yang lebih banyak.

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

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

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

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

将图像转换为灰度。

0% (0) 是默认值，表示原始图像。

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

备注：Tidak diizinkan nilai negatif.
hue-rotate(deg)

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

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

备注：最大值为 360 度。
invert(%)

反转图像中的样本。

0% (0) 是默认值，表示原始图像。

100% 将使图像完全反转。

备注：Tidak diizinkan nilai negatif.
opacity(%)

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

0% 是完全透明的。

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

备注：Tidak diizinkan nilai negatif.

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

调整图像饱和度。

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

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

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

备注：Tidak diizinkan nilai negatif.
sepia(%)

将图像转换为棕褐色。

0% (0) 是默认值，表示原始图像。

100% 会使图像完全呈棕褐色。

备注：Tidak diizinkan nilai negatif.

Perincian teknikal

Versi CSS: CSS3

Dukungan pereka

Nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong sifat ini.

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