Funkcija invert
Funkcija invert ļauj
invertēt krāsas fona attēlā.
Vērtība 0 nozīmē,
ka attēls paliek oriģināls. Vērtība
100% vai 1 pilnībā invertē fona krāsas.
Jebkurš skaitlis, kas atrodas
šajā diapazonā, daļēji invertē krāsas.
Negatīvu vērtību nevar iestatīt.
Pēc noklusējuma vērtība ir 0.
Sintakse
selektors {
filter: invert(skaitlis);
}
Piemērs
Invertēsim mūsu attēla krāsas līdz
vērtībai 50%:
<div id="elem"></div>
#elem {
filter: invert(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Piemērs
Tagad invertēsim mūsu attēla krāsas līdz
vērtībai 100%:
<div id="elem"></div>
#elem {
filter: invert(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Piemērs
Tagad iestatīsim
funkcijā invert vērtību
vienādu ar 0:
<div id="elem"></div>
#elem {
filter: invert(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Skatiet arī
-
funkcija
blur,
kas izplūšina fonu -
funkcija
brightness,
kas iestata fonam spilgtumu -
funkcija
contrast,
kas iestata fonam kontrastu -
funkcija
drop-shadow,
kas pievieno fonu ēnu -
funkcija
hue-rotate,
kas iestata fonam toņu rotāciju -
funkcija
opacity,
kas iestata fonam necaurredzamību -
funkcija
sepia,
kas pārveido fonu sepijā -
īpašība
background,
kas ir īpašības saīsinājums fonam -
īpašība
background-image,
ar kuru elementam var pievienot fona attēlu -
īpašība
filter,
kas iestata fonam stilu