Rekomendasi kursus:

Fungsi sepia() CSS

Definisi dan penggunaan CSS sepia() Fungsi penyaring akan mengubah gambar menjadi coklat gelap ( warna yang lebih hangat dan kuning / coklat).

  • 100% (atau 1) akan membuat gambar sepenuhnya berwarna coklat gelap
  • 0% (atau 0) akan menghilangkan efek

Contoh

Contoh 1

Atur efek coklat gelap 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 kombinasi atribut:

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

Sintaks CSS

sepia(amount)
Nilai Deskripsi
amount

Pilihan. Tentukan nilai coklat gelap, dapat berupa angka atau persen.

100% (atau 1) akan membuat elemen sepenuhnya berwarna coklat gelap.

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

Detil teknis

Versi: Modul Effek Penyaring CSS Level 1

Dukungan browser

Angka di dalam tabel menunjukkan versi paling awal browser yang mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Laman sebelumnya

Rujukan：Sifat filter CSS

Rujukan：Fungsi CSS blur()

Rujukan：Fungsi CSS brightness()

Rujukan：Fungsi CSS contrast()

Rujukan：Fungsi CSS drop-shadow()

Rujukan：Fungsi CSS grayscale()

Rujukan：Fungsi CSS hue-rotate()

Rujukan：Fungsi CSS invert()

Rujukan：Fungsi opacity() CSS

Rujukan：Fungsi saturate() CSS