hue-rotate funksiyası

hue-rotate funksiyası fon şəklini rəng dairəsində çaların fırlanması vasitəsilə dəyişməyə imkan verir. Xassənin dəyərləri dərəcələrlə göstərilir və rəng dairəsinin bucağını təyin edir. 0 və ya 360 dəyəri şəklin dəyişməz qalacağını göstərir, bu diapazonda olan istənilən ədəd isə fonun rəng tonunun dəyişməsinə səbəb olur. Susmaya görə dəyər 0deg-dir.

Sintaksis

cssselektor {
  filter: hue-rotate(bucaq);
}

Nümunə

Gəlin şəklimiz üçün rəng tonunu 150deg olaraq təyin edək:

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

Результат:

Nümunə

İndi isə şəklin rəng tonunu 50deg olaraq təyin edək:

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

Результат:

Nümunə

Gəlin hue-rotate xassəsində heç bir dəyər təyin etməyək:

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

Результат:

Həmçinin bax