Rekomendasi kursus:

Fungsi grayscale() CSS

Definisi dan penggunaan CSS grayscale() Fungsi filter akan mengubah gambar ke abu-abu.

  • 100% (atau 1) akan membuat gambar sepenuhnya berwarna abu-abu
  • 0% (atau 0) akan menghapus efek

Contoh

Contoh 1

Tetapkan 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, yang dapat berupa angka atau persen.

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

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

Nilai baku adalah 1.

Detil teknologi

Versi: Modul Efect Filter CSS Level 1

Dukungan peramban

Angka di dalam tabel menunjukkan versi paling awal penggunaan penuh fungsi ini oleh peramban.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Halaman berkaitan

Rujukan：Sifat filter CSS

Rujukan：Fungsi blur() CSS

Rujukan：Fungsi brightness() CSS

Rujukan：Fungsi contrast() CSS

Rujukan：Fungsi drop-shadow() CSS

Rujukan：Fungsi hue-rotate() CSS

Rujukan：Fungsi invert() CSS

Rujukan：Fungsi opacity() CSS

Rujukan：Fungsi saturate() CSS

Rujukan：Fungsi sepia() CSS