Rekomendasi pelajaran:

Fungsi grayscale() CSS

Definisi dan penggunaan CSS grayscale() Fungsi penapisan akan mengubah gambar menjadi abu-abu.

  • 100% (atau 1) akan membuat gambar menjadi abu-abu sepenuhnya
  • 0% (atau 0) akan menghilangkan efek

Contoh

Contoh 1

Setel nilai abu-abu yang berbeda untuk gambar:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

Coba sendiri

Contoh 2

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

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

Coba sendiri

Sintaks CSS

grayscale(amount)
Nilai Deskripsi
amount

Pilihan. Tentukan nilai abu-abu, dapat berupa angka atau persen.

100% (atau 1) akan membuat elemen menjadi abu-abu sepenuhnya.

0% (atau 0) menunjukkan gambar asli (tanpa efek).

Nilai defaultnya adalah 1.

Detil teknis

Versi: Modul efek penapisan CSS Level 1

Dukungan peramban

Angka di tabel menunjukkan versi peramban 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 contrast() CSS

Referensi:Fungsi drop-shadow() CSS

Referensi:Fungsi hue-rotate() CSS

Referensi:Fungsi invert() CSS

Referensi:Fungsi opacity() CSS

Referensi:Fungsi saturate() CSS

Referensi:Fungsi sepia() CSS