Fungsi invert
Fungsi invert membolehkan
menyongsangkan warna dalam imej latar belakang.
Nilai 0 menandakan
imej kekal asal. Nilai
100% atau 1 menyongsangkan warna latar belakang sepenuhnya.
Mana-mana nombor yang terletak dalam
julat ini menyongsangkan warna sebahagiannya.
Nilai negatif tidak boleh ditetapkan.
Secara lalai, nilai ialah 0.
Sintaks
pemilih {
filter: invert(nombor);
}
Contoh
Mari songsangkan warna imej kita kepada
nilai 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;
}
:
Contoh
Sekarang mari songsangkan warna imej kita kepada
nilai 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;
}
:
Contoh
Sekarang mari tetapkan dalam
fungsi invert nilai
bersamaan 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;
}
:
Lihat juga
-
fungsi
blur,
yang mengaburkan latar belakang -
fungsi
brightness,
yang menetapkan kecerahan latar belakang -
fungsi
contrast,
yang menetapkan kontras latar belakang -
fungsi
drop-shadow,
yang menetapkan bayangan untuk latar belakang -
fungsi
hue-rotate,
yang menetapkan rona warna untuk latar belakang -
fungsi
opacity,
yang menetapkan ketelusan latar belakang -
fungsi
sepia,
yang mengubah latar belakang kepada sepia -
property
background,
yang merupakan property singkatan untuk latar belakang -
property
background-image,
yang boleh digunakan untuk menetapkan imej latar belakang kepada blok -
property
filter,
yang menetapkan gaya untuk latar belakang