hue-rotate Fonksiyonu
hue-rotate fonksiyonu,
arka plan görüntüsünün renk tonunu,
renk çarkındaki ton döndürme yoluyla
değiştirmenizi sağlar. Özelliğin değerleri, renk çarkındaki
açıyı belirten derece cinsinden belirtilir. 0 veya 360 değeri,
görüntünün değişmeden kalacağını belirtir ve bu aralığın içindeki herhangi bir sayı
arkanın renginin değişmesine neden olur.
Varsayılan değer 0deg'dir.
Sözdizimi
seçici {
filter: hue-rotate(açı);
}
Örnek
Resmimiz için renk tonunu
150deg olarak ayarlayalım:
<div id="elem"></div>
#elem {
filter: hue-rotate(150deg);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Örnek
Şimdi resmin renk tonunu
50deg olarak ayarlayalım:
<div id="elem"></div>
#elem {
filter: hue-rotate(50deg);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Örnek
hue-rotate özelliğine
bir değer belirtmeyelim:
<div id="elem"></div>
#elem {
filter: hue-rotate();
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ayrıca Bakınız
-
blurfonksiyonu,
arkayı bulanıklaştırır -
brightnessfonksiyonu,
arka planın parlaklığını ayarlar -
contrastfonksiyonu,
arka planın kontrastını ayarlar -
drop-shadowfonksiyonu,
arka plana gölge ekler -
invertfonksiyonu,
arka plan renklerini tersine çevirir -
opacityfonksiyonu,
arka planın şeffaflığını ayarlar -
sepiafonksiyonu,
arka planı sepya'ya dönüştürür -
backgroundözelliği,
arka plan için kısayol özelliğidir -
background-imageözelliği,
bir bloğa arka plan resmi eklemek için kullanılır -
filterözelliği,
arka plan için stil belirler