Rekomendasi kursus:

Fungsi contrast() CSS

Definisi dan penggunaan CSS contrast() Fungsi filter digunakan untuk mengubah kesalahan elemen.

  • 0% akan membuat imej sepenuhnya menjadi abu-abu
  • 100% (atau 1) adalah nilai lalai, yang menunjukkan imej asal
  • Nilai yang lebih daripada 100% akan menambah kesalahan
  • Nilai yang lebih rendah daripada 100% akan mengurangkan kesalahan

Contoh

Contoh 1

Menambah dan mengurangkan kesalahan imej:

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

Cuba sendiri

Contoh 2

untuk contrast() dengan backdrop-filter Gabungkan sifat:

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

Cuba sendiri

Sintaks CSS

contrast(amount)
Nilai Penerangan
amount

Pilihan. Tentukan nilai kesalahan, boleh jadi nombor atau peratusan.

0% akan membuat elemen sepenuhnya menjadi abu-abu.

100% (atau 1) adalah nilai lalai, yang menunjukkan imej asal (tanpa kesan).

Nilai lebih daripada 100% akan menambah kesalahan, nilai yang lebih rendah daripada 100% akan mengurangkan kesalahan.

Butiran teknikal

Versi: Modul Efects Filter CSS Level 1

Pemungutan bantu

Nombor di dalam jadwal menunjukkan versi pereka paling awal yang menolong fungsi ini.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Laman yang berkenaan

Rujukan:Sifat filter CSS

Rujukan:Fungsi blur() CSS

Rujukan:Fungsi brightness() CSS

Rujukan:Fungsi drop-shadow() CSS

Rujukan:Fungsi grayscale() CSS

Rujukan:Fungsi hue-rotate() CSS

Rujukan:Fungsi invert() CSS

Rujukan:Fungsi opacity() CSS

Rujukan:Fungsi saturate() CSS

Rujukan:Fungsi sepia() CSS