Hisia CSS filter

Ufafanuzi na matumizi

Inyuzi ya filter inadefini vizuizi vya kiwango cha kina (kama ni <img>) (kama kama kina na uharibifu).

Tazama pia:

Makao ya CSS:Taswira za CSS

Kitabu cha mifano cha HTML DOM:Inyuzi ya filter

Mifano

Kufaa taswira zote kwa mabaki na mabaki 100% ya kijani:

img {
  filter: grayscale(100%);
}

Tukifanya kifo cha kuzungumza

Maelezo:Inaelewa kufaa zaidi kwenye chini ya ukurasa.

CSS inyuzi ya kufaa

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

Maelezo:如需使用多个滤镜，请用空格分隔每个滤镜（参见页面下方的更多实例）。

技术细节

默认值： none
继承： 否
动画制作： 支持。请参阅：动画相关属性.
版本： CSS3
JavaScript 语法： object.style.filter="grayscale(100%)"

滤镜函数

Tazamaji:使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜 描述
none 默认值。规定无效果。
blur(px)

对图像应用模糊效果。较大的值将产生更多的模糊。

如果为指定值，则使用 0。
brightness(%)

调整图像的亮度。

  • 0％ 将使图像完全变黑。
  • 默认值是 100％，代表原始图像。
  • 值超过 100％ 将提供更明亮的结果。
contrast(%)

调整图像的对比度。

  • 0％ 将使图像完全变黑。
  • 默认值是 100％，代表原始图像。
  • 超过 100％ 的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)

Tumia shadow ya picha.

Mbinu za kina za kuangalia:

  • h-shadow - inayotambulika. Inaangazia uharibifu wa shadow wa kijauzito kwa picha. Namba za chini zingefanya shadow kuwa kumekuwa kwenye picha ya kushoto.
  • v-shadow - inayotambulika. Inaangazia uharibifu wa shadow wa kijauzito kwa picha. Namba za chini zingefanya shadow kuwa kumekuwa kwenye picha ya juu.

blur - inayotambulika. Hii ni uharibifu 3 wa uharibifu, kina inahitajika kwa sababu ya picha. Inaonyesha huzuni ya shadow. Namba za juu zingefanya shadow kuwa kubwa na kubwa zaidi (shadow inaonekana kubwa zaidi na kubwa zaidi). Hatalii namba za chini. Ikiwa inahitajika, inatumiwa 0 (kina ya shadow ina upekee wa kubwa).

spread - inayotambulika. Hii ni uharibifu 4 wa uharibifu, kina inahitajika kwa sababu ya picha. Namba za juu zingefanya shadow kueneza na kuwa kubwa, namba za chini zingefanya shadow kuwa kikubwa. Ikiwa inahitajika, inatumiwa 0 (shadow ina upekee wa kikubwa).

Tazamaji:Chrome, Safari na Opera, kwa hayo sasa kwa kawaida na hasa kwa kwa kawaida kwa sababu zingekuwa inasimulia kwa uharibifu 4 wa uharibifu; ikiwa inatengenezwa, haitasimuli.

color - inayotambulika. Ongeza rangi ya shadow. Ikiwa inahitajika, rangi inatokea kwa sababu ya kifungu (kwa kawaida ni kijani).

Mfano hii unaotengeneza shadow ya kijani, kwa ujauzito wa upekee 8px, na kusababisha huzuni ya 10px:

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

Maelezo:这个滤镜类似 box-shadow 属性。
grayscale(%)

将图像转换为灰阶。

  • 0% (0) ni thamani ya kuzingatia, inaonyesha picha ya asili.
  • 100％ 将使图像完全变灰（用于黑白图像）。

Tazamaji:Hakuna thamani ya kina.
hue-rotate(deg)

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

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

反转图像中的样本。

  • 0% (0) ni thamani ya kuzingatia, inaonyesha picha ya asili.
  • 100％将使图像完全反转。

Tazamaji:Hakuna thamani ya kina.
opacity(%)

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

  • 0% itakuwa inaonesha kina kina kina kina kina kina.
  • 100% (1) ni thamani ya kuzingatia na inaonyesha picha ya asili (inaonesha).

Tazamaji:Hakuna thamani ya kina.

Maelezo:Filter hii inahusiana na tabia ya opacity.
saturate(%);

Kuingiza kina kina picha.

  • 0% (0) itakuwa inaonyesha picha ya asili inayotumia kina kina kina.
  • 100% ni thamani ya kuzingatia na inaonyesha picha ya asili.
  • Thamani za kina 100% zinaonyesha matokeo za kina kina kina.

Tazamaji:Hakuna thamani ya kina.
sepia(%);

Tumia picha kina kahawia.

  • 0% (0) ni thamani ya kuzingatia, inaonyesha picha ya asili.
  • 100% itakuwa ina matokeo wa kahawia kina picha kina kina.

Tazamaji:Hakuna thamani ya kina.
url();

Tumia url() kwa kumtumia eneo la SVG filter kwa eneo ya faili ya XML, na inaweza kuwa na kiwango cha elementi ya filter kina. Mfano:

filter: url(svg-url#element-id);
initial Wakilisha tabia hii katika thamani yake ya kina. Angalia initial.
inherit Wakilisha katika tabia yake ya kinaelementi yake yote. Angalia inherit.

Mafano mengi

Mfano wa mifupi

Tumia mifupi kwa picha:

img {
  filter: blur(5px);
}

Tukifanya kifo cha kuzungumza

Mfano wa mifupi 2

Tumia picha ya nyuma ya mifupi:

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

Tukifanya kifo cha kuzungumza

Mfano wa ujuzi

Tumia ujuzi wa picha:

img {
  filter: brightness(200%);
}

Tukifanya kifo cha kuzungumza

Mfano wa kina

Tumia matokeo wa kina kwa picha:

img {
  filter: contrast(200%);
}

Tukifanya kifo cha kuzungumza

Mfano wa shadow

Tumia shadow kwa picha:

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

Tukifanya kifo cha kuzungumza

Mfano wa kubadilisha

Kusaidia kina ya picha kwa kubadilisha:

img {
  filter: grayscale(50%);
}

Tukifanya kifo cha kuzungumza

Mfano wa kusimamia mabaya

Kusaidia kina ya picha kwa kusimamia mabaya:

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

Tukifanya kifo cha kuzungumza

Mfano wa kubadilisha

Kusaidia kina ya picha kwa kubadilisha:

img {
  filter: invert(100%);
}

Tukifanya kifo cha kuzungumza

Mfano wa uharibifu wa uwezo

Kusaidia kina ya picha kwa uharibifu wa uwezo:

img {
  filter: opacity(30%);
}

Tukifanya kifo cha kuzungumza

Mfano wa kusimamia

Kusaidia kina ya picha kwa kusimamia:

img {
  filter: saturate(800%);
}

Tukifanya kifo cha kuzungumza

Mfano wa mabaya

Kubadilisha picha kwa mabaya:

img {
  filter: sepia(100%);
}

Tukifanya kifo cha kuzungumza

Kusimamia kina zaidi

Kwa kusimamia kinalesha zaidi, tukisaidia kwa kufikia kwa ukosefu wa ukweli. Tazama na kwamba uadilifu unaaminika (mfano, kama kusimamia grayscale() baada ya sepia() itakuwa muundo wa kijani kwa kina):

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

Tukifanya kifo cha kuzungumza

Kila kifupi cha kinalesha

Tukionyesha kila kifupi cha kinalesha:

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

Tukifanya kifo cha kuzungumza

Muungano wa kinalesha

Namba za kati ya tabia inaonyesha toleo la kwanza la kusimamia kwa kila kifupi.

Namba za -webkit- inaonyesha toleo la kwanza lililotumika kwa kuzungumza na kifupi.

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-

Tazamaji:Versi za Internet Explorer za zamani (4.0 hadi 8.0) inasimamia kina kwa uwanja wa kisasa "filter". Kwa sababu ya kumtumika kwa IE8 na vya chini, inahusiana na uharibifu wa uwezo.