A hue-rotate függvény

A hue-rotate függvény lehetővé teszi a háttérkép színességének megváltoztatását a színkörön való árnyalatforgatás révén. A tulajdonság értékeit fokokban kell megadni, amelyek a színkör szögét jelölik. A 0 vagy 360 érték azt jelenti, hogy a kép változatlan marad, és a tartományon belüli bármely szám a háttér árnyalatának megváltozásához vezet. Alapértelmezetten az érték 0deg.

Szintaxis

szelektor {
	filter: hue-rotate(szög);
}

Példa

Állítsuk be a képünk színességét 150deg értékre:

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

Példa

Most állítsuk be a kép színességét 50deg értékre:

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

Példa

Most ne adjunk meg értéket a hue-rotate tulajdonságnál:

<div id="elem"></div>

#elem {
	filter: hue-rotate();
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lásd még

a blur függvény,
amely elmossa a hátteret
a brightness függvény,
amely beállítja a háttér fényerejét
a contrast függvény,
amely beállítja a háttér kontrasztját
a drop-shadow függvény,
amely árnyékot ad a hátterhez
a invert függvény,
amely megfordítja a háttér színeit
a opacity függvény,
amely beállítja a háttér átlátszóságát
a sepia függvény,
amely szépia hatást ad a hátternek
a background tulajdonság,
amely egy rövidítés a háttér beállítására
a background-image tulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz
a filter tulajdonság,
amely stílust ad a hátternek