Fungu la CSS invert()

Maelezo na matumizi

CSS ina invert() Fungu la kifafanizi kinatumika kushambuliza rangi ya picha.

  • 100% (1) kinasababisha kushambuliza picha kwa ujumbe kwa kuzingatia rangi yake
  • 0% (0) haitakapoweza kufikirika kwa ujumbe

Mfano

Mfano 1

Kushambuliza rangi ya picha:

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

Tafuta tena

Mfano 2

inaonyesha invert() na backdrop-filter Inayotumika kwa pamoja:

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

Tafuta tena

Inafaa ya CSS

invert(amount)
Wabidi Maelezo
amount

Inafaa. Inaonyesha ujumbe wa kushambuliza, inaweza kuwa namba au namba za ufupi.

100% (1) kinasababisha kushambuliza elementi kwa ujumbe, 0% (0) inaeleza picha asilia (bila mafanikio).

Chaguo cha kuzingatia ni 0.

Vivyo vya mtego

Mwaka: CSS Filter Effects Module Level 1

Mwongozo wa kufungua

Mafanikio ya tabia za programu zinaonyesha sababu ya kufaa kufungua fungu hii.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Sayari za mawasiliano

Mwongozo:Mfano wa CSS filter

Mwongozo:Fungu la CSS blur()

Mwongozo:Fungu la CSS brightness()

Mwongozo:Fungu la CSS contrast()

Mwongozo:Fungu la CSS drop-shadow()

Mwongozo:Fungu la CSS grayscale()

Mwongozo:Fungu la CSS hue-rotate()

Mwongozo:Fungu la CSS opacity()

Mwongozo:Fungu la CSS saturate()

Mwongozo:FaaCSS sepia()