hue-rotate funksiyasi

hue-rotate funksiyasi fon tasvirining rangdorligini rang doirasidagi rang o'zgarishi orqali o'zgartirish imkonini beradi. Xususiyat qiymatlari darajalarda ko'rsatiladi, rang doirasining burchagini bildiradi. 0 yoki 360 qiymati tasvir o'zgarishsiz qolishini bildiradi, va bu oraligdagi har qanday raqam fon rang o'zgarishining o'zgarishiga olib keladi. Standart qiymati 0deg.

Sintaksis

cssselector {
  filter: hue-rotate(burchak);
}

Misol

Keling, tasvirimiz uchun rangdorlikni 150deg ga teng qilib belgilaymiz:

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

Результат:

Misol

Endi tasvir rangdorligini 50deg ga teng qilib belgilaymiz:

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

Результат:

Misol

Keling, hue-rotate xususiyatida qiymat bermaymiz:

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

Результат:

Shuningdek qarang