Rekomendasi Kursus:

Fungsi brightness() CSS

Definisi dan penggunaan CSS brightness() Fungsi filter digunakan untuk mengatur kecerahan elemen.

  • 0% akan membuat gambar menjadi hitam sepenuhnya
  • 100% (atau 1) adalah nilai default, yang menunjukkan gambar asli
  • Nilai di atas 100% akan membuat gambar menjadi lebih terang
  • Nilai di bawah 100% akan membuat gambar menjadi gelap

Contoh

Contoh 1

Membuat gambar lebih terang atau lebih gelap daripada gambar asli:

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

Coba Sendiri

Contoh 2

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

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

Coba Sendiri

Sintaks CSS

brightness(amount)
Nilai Deskripsi
amount

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

0% akan membuat elemen menjadi hitam sepenuhnya. 100% (atau 1) adalah nilai default, yang menunjukkan gambar asli (tanpa efek).

Nilai di atas 100% akan membuat gambar lebih terang.

Detil Teknologi

Versi: Modul Efek Filter CSS Level 1

Dukungan Browser

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Halaman yang berhubungan

Referensi:Atribut filter CSS

Referensi:Fungsi blur() CSS

Referensi:Fungsi contrast() 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