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

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

Példa

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

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

css#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:

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

css#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:

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

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

Результат:

Lásd még