Pereka kursus:

Fungsi invert() CSS

Definisi dan penggunaan CSS invert() Fungsi filter digunakan untuk balikkan warna imej.

  • 100% (1) akan membuat imej sepenuhnya terbalik
  • 0% (0) akan tiada kesan sama ada

Contoh

Contoh 1

Balikkan warna imej:

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

Cuba sendiri

Contoh 2

akan invert() dengan backdrop-filter guna bersama-sama:

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

Cuba sendiri

Syarat CSS

invert(amount)
Nilai Penerangan
amount

Pilihan. Tentukan tahap pengalihan, boleh jadi nombor atau peratusan.

100% (1) akan membuat elemen sepenuhnya terbalik, 0% (0) menunjukkan imej asal (tanpa kesan).

Nilai lalai adalah 0.

Perincian teknikal

Versi: Modul Efect Filtar CSS Level 1

Pendukung pereka

Nombor di dalam tabel menunjukkan versi pereka palingawal yang menyokong fungsi ini.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Halaman yang berhubungan

Rujukan:Sifat filter CSS

Rujukan:Fungsi blur() CSS

Rujukan:Fungsi brightness() CSS

Rujukan:Fungsi contrast() CSS

Rujukan:Fungsi drop-shadow() CSS

Rujukan:Fungsi grayscale() CSS

Rujukan:Fungsi hue-rotate() CSS

Rujukan:Fungsi opacity() CSS

Rujukan:Fungsi saturate() CSS

Rujukan:Fungsi sepia() CSS