Fungsi hue-rotate() CSS

Definisi dan penggunaan

CSS hue-rotate() Fungsi penapisan warna diterapkan ke elemen.

Contoh

Contoh 1

Tetapkan pencahayaan warna yang berbeda untuk gambar:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

Coba sendiri

Contoh 2

untuk hue-rotate() dengan backdrop-filter Gabungkan properti:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Coba sendiri

Sintaks CSS

hue-rotate(angle)
Nilai Deskripsi
angle

Pilihan. Tentukan suatu sudut untuk menyatakan perubahan relatif warna sample masukan.

Nilai positif akan menambah nilai warna, sementara nilai negatif akan mengurangkan nilai warna.

0deg merepresentasikan imej asal (tanpa efek).

Nilai lalai adalah 0.

Perincian teknikal

Versi: Modul Effek Penapisan CSS Level 1

Dukungan pereka

Angka di dalam jadwal menunjukkan versi pereka paling awal yang mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Laman berkenaan

Rujukan:Sifat filter CSS

Rujukan:Fungsi blur() CSS

Rujukan:Fungsi brightness() CSS

Rujukan:Fungsi contrast() CSS

Rujukan:Fungsi drop-shadow() CSS

Rujukan:Fungsi grayscale() CSS

Rujukan:Fungsi invert() CSS

Rujukan:Fungsi opacity() CSS

Rujukan:Fungsi saturate() CSS

Rujukan:Fungsi sepia() CSS