CSS hue-rotate() fonksiyonu

Tanımı ve kullanımı

CSS'nin hue-rotate() Filtre fonksiyonları, elementlere renk dönüşü uygulayabilir.

Örnek

Örnek 1

Görseller için farklı renk dönüşlerini ayarlayın:

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

Deneyin

Örnek 2

şunu hue-rotate() ile backdrop-filter Özellikleri birlikte kullanma:

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;
}

Deneyin

CSS dilbilgisi

hue-rotate(angle)
Değer Açıklama
angle

İsteğe bağlı. Bir açı belirtmek için bir açı tanımlayın, bu da girdi örnek tonunun relatifi değişimini belirtir.

Pozitif değerler ton değerini artırır, negatif değerler ton değerini azaltır.

0deg, orijinal görüntüyü (hiçbir etki olmadan) belirtir.

Öntanımlı değeri 0'dır.

Teknik ayrıntılar

Sürüm: CSS Filter Effects Module Level 1

Tarayıcı desteği

Tablodaki rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

İlgili sayfa

Referans:CSS filtre özelliği

Referans:CSS blur() fonksiyonu

Referans:CSS brightness() fonksiyonu

Referans:CSS contrast() fonksiyonu

Referans:CSS drop-shadow() fonksiyonu

Referans:CSS grayscale() fonksiyonu

Referans:CSS invert() fonksiyonu

Referans:CSS opacity() fonksiyonu

Referans:CSS saturate() fonksiyonu

Referans:CSS sepia() fonksiyonu