Rekomendasi Kursus:

Fungsi CSS sepia()

Definisi dan penggunaan CSS sepia() Fungsi filter akan mengubah gambar menjadi hitam putih (suatu warna yang lebih hangat dan lebih karamel/kuning).

  • 100% (atau 1) akan membuat gambar menjadi hitam putih sepenuhnya
  • 0% (atau 0) akan menghilangkan efek

Contoh

Contoh 1

Atur efek hitam putih yang berbeda untuk gambar:

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

Coba Sendiri

Contoh 2

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

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

Coba Sendiri

Syntaks CSS

sepia(amount)
Nilai Deskripsi
amount

Pilihan. Tentukan nilai hitam putih, dapat berupa angka atau persen.

100% (atau 1) akan membuat elemen menjadi hitam putih sepenuhnya.

0% (atau 0) menunjukkan gambar asli (tanpa efek). Nilai default adalah 0.

Detil Teknik

Versi: Modul Efek Filter CSS Level 1

Dukungan Browser

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

Referensi：Fungsi CSS brightness()

Referensi：Fungsi CSS contrast()

Referensi：Fungsi CSS drop-shadow()

Referensi：Fungsi CSS grayscale()

Referensi：Fungsi CSS hue-rotate()

Referensi：Fungsi CSS invert()

Referensi：Fungsi opacity() CSS

Referensi：Fungsi saturate() CSS