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

blur fonksiyonu,
arkayı bulanıklaştırır
brightness fonksiyonu,
arka planın parlaklığını ayarlar
contrast fonksiyonu,
arka planın kontrastını ayarlar
drop-shadow fonksiyonu,
arka plana gölge ekler
invert fonksiyonu,
arka plan renklerini tersine çevirir
opacity fonksiyonu,
arka planın şeffaflığını ayarlar
sepia fonksiyonu,
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