Rekomendasi Kursus：

Fungsi contrast() CSS

Definisi dan penggunaan CSS contrast() Fungsi filter digunakan untuk mengatur kontras elemen.

  • 0% akan membuat gambar menjadi abu-abu sepenuhnya
  • 100% (atau 1) adalah nilai default, yang menunjukkan gambar asli
  • Nilai di atas 100% akan menambahkan kontras
  • Nilai di bawah 100% akan menurunkan kontras

Contoh

Contoh 1

Menambahkan dan menurunkan kontras gambar:

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

Coba sendiri

Contoh 2

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

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

Coba sendiri

Sintaks CSS

contrast(amount)
Nilai Deskripsi
amount

Pilihan. Tentukan nilai kontras, dapat berupa angka atau persen.

0% akan membuat elemen menjadi abu-abu sepenuhnya.

100% (atau 1) adalah nilai default, yang menunjukkan gambar asli (tanpa efek).

Nilai lebih dari 100% akan menambahkan kontras, nilai di bawah 100% akan mengurangi kontras.

Detil teknis

Versi： Modul 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 blur() CSS

Referensi：Fungsi brightness() CSS

Referensi：Fungsi drop-shadow() CSS

Referensi：Fungsi grayscale() CSS

Referensi：Fungsi hue-rotate() CSS

Referensi：Fungsi invert() CSS

Referensi：Fungsi opacity() CSS

Referensi：Fungsi saturate() CSS

Referensi：Fungsi sepia() CSS