Fungsi CSS invert()

Definisi dan Penggunaan

CSS invert() Fungsi filter digunakan untuk mengebalikan warna gambar.

  • 100% (1) akan membuat gambar mengebalikan sepenuhnya
  • 0% (0) tidak akan ada efek apapun

Contoh

Contoh 1

Balik warna gambar:

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

Coba Sendiri

Contoh 2

untuk invert() dengan backdrop-filter Gunakan properti bersamaan:

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

Coba Sendiri

Syntaks CSS

invert(amount)
Nilai Deskripsi
amount

Pilihan. Tentukan tingkat pengebalikan, dapat berupa angka atau persen.

100% (1) akan membuat elemen mengebalikan sepenuhnya, 0% (0) menunjukkan gambar asli (tanpa efek).

Nilai standar adalah 0.

Detil Teknologi

Versi: Modul Efect Efek Filter CSS Level 1

Dukungan Browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Halaman yang berhubungan

Referensi：Atribut filter CSS

Referensi：Fungsi CSS blur()

Referensi：Fungsi CSS brightness()

Referensi：Fungsi CSS contrast()

Referensi：Fungsi CSS drop-shadow()

Referensi：Fungsi CSS grayscale()

Referensi：Fungsi CSS hue-rotate()

Referensi：Fungsi CSS opacity()

Referensi：Fungsi CSS saturate()

Referensi：Fungsi CSS sepia()