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
blurfüggvény,
amely elmossa a hátteret -
a
brightnessfüggvény,
amely beállítja a háttér fényerejét -
a
contrastfüggvény,
amely beállítja a háttér kontrasztját -
a
drop-shadowfüggvény,
amely árnyékot ad a hátterhez -
a
invertfüggvény,
amely megfordítja a háttér színeit -
a
opacityfüggvény,
amely beállítja a háttér átlátszóságát -
a
sepiafüggvény,
amely szépia hatást ad a hátternek -
a
backgroundtulajdonság,
amely egy rövidítés a háttér beállítására -
a
background-imagetulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz -
a
filtertulajdonság,
amely stílust ad a hátternek