Kina Mchanga wa Hali

Mifano na matumizi

filter Kina inasababisha hali ya matokeo kwa picha (kama kufupisha na kuzingatia).

Tazama pia:

Kitabu cha mifano cha CSS:Kina filter

Mfano

Kuwinga rangi ya picha kwa mabaya (100% ya nyanja):

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

Tenda kwa matokeo

Mwongozo

Inaonyesha kina filter:

object.style.filter

Msaada wa kumaliza kina filter:

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

Mchanga wa Filter

Maelezo:Mchanga huzungumza kwa faida ya asilimia (kama 75%) pia hupata thamani za chini (ina maana ya 0.75).

Mchanga Kuonyesha
none Inasababisha hali ya kufupisha haikubali.
blur(px)

Tumia matokeo ya hali ya simu ya picha. Kivuli kikubwa kinakutumia hali ya kufupisha zaidi.

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

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

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

Msaada:此 filter 类似于 box-shadow 属性。
grayscale(%)

将图像转换为灰度。

0% (0) inaingia kwa chaguo cha kuzingatia, inaonyesha picha asilia.

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

Maelezo:Hakupewziwa kimaadili.
hue-rotate(deg)

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

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

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

反转图像中的样本。

0% (0) inaingia kwa chaguo cha kuzingatia, inaonyesha picha asilia.

100% 将使图像完全反转。

Maelezo:Hakupewziwa kimaadili.
opacity(%)

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

0% 是完全透明的。

100% (1) inaingia kwa chaguo cha kuzingatia, inaonyesha picha asilia (bila muhula).

Maelezo:Hakupewziwa kimaadili.

Msaada:Hii filter inahusiana na hatua ya opacity.
saturate(%)

Usaidizi wa kumaliza kina picha.

0% (0) inaonyesha picha inapotea kila msaada.

100% inaingia kwa chaguo cha kuzingatia, inaonyesha picha asilia.

Tofauti kwa juu ya 100% inaofaa kubainisha matokeo ya kufikiria.

Maelezo:Hakupewziwa kimaadili.
sepia(%)

Konverta picha kuwa ujani.

0% (0) inaingia kwa chaguo cha kuzingatia, inaonyesha picha asilia.

100% inaonyesha picha inapataa ujani.

Maelezo:Hakupewziwa kimaadili.

Mafuriko ya teknolojia

Toleo la CSS: CSS3

Muungano wa kivinzi

Makala ya tabia inadai na toleo la kwanza kinasababisha kufikia tabia hii.

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