Funiapo la CSS kwa grayscale()

Ufafanuzi na matumizi

CSS kwa grayscale() Funiapo inaingiza picha kwa ukichwa

  • 100% (au 1) inaingiza picha kwa ukichwa kwa kawaida
  • 0% (au 0) hau ingiza matukio

Mfano

Mwongozo 1

Kufikiria thamani za ukichwa kwa picha:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

Kutendeka kwa mwenyewe

Mwongozo 2

inaonyesha grayscale() na backdrop-filter Kuandaa tabia na mawili:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: grayscale(50%);
  backdrop-filter: grayscale(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Kutendeka kwa mwenyewe

Inayofaa kusoma kwa CSS

grayscale(amount)
Thamani Maelezo
amount

Inahofu. Inasema thamani ya ukichwa, inaweza kuwa namba au nishati.

100% (au 1) inaingiza kina kwa ukichwa kwa kawaida.

0% (au 0) inaeleza picha ya asili (bila matukio)

Kichwa cha kawaida ni 1.

Maelezo ya tekniolojia

Mwili: CSS Filter Effects Module Level 1

Mafanikio ya kifungu

Mafanikio ya kifungu cha kawaida kwa programu za kusoma kwa kufungua tabia hii kina msingi wa kwanza.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Sayari ya muhtasari

Tunaneza:Mfano wa CSS filter

Tunaneza:Funiapo la CSS kwa blur()

Tunaneza:Funiapo la CSS kwa brightness()

Tunaneza:Funiapo la CSS kwa contrast()

Tunaneza:Funiapo la CSS kwa drop-shadow()

Tunaneza:Funiapo la CSS kwa hue-rotate()

Tunaneza:Funiapo la CSS kwa invert()

Tunaneza:Funiapo la CSS kwa opacity()

Tunaneza:Funguo ya saturate() katika CSS

Tunaneza:Funguo ya sepia() katika CSS