ფუნქცია hue-rotate

ფუნქცია hue-rotate საშუალებას აძლევს შეცვალოს ფონის გამოსახულების ფერიანობა ფერის წრეზე ტონის როტაციის მეშვეობით. თვისების მნიშვნელობები მითითებულია გრადუსებში, რაც აღნიშნავს ფერის წრის კუთხეს. მნიშვნელობა 0 ან 360 აღნიშნავს, რომ გამოსახულება უცვლელი რჩება, ხოლო ნებისმიერი რიცხვი, რომელიც მდებარეობს ამ დიაპაზონის ფარგლებში, იწვევს ფონის ტონის ცვლილებას. სტანდარტულად მნიშვნელობა არის 0deg.

სინტაქსი

cssსელექტორი {
  filter: hue-rotate(კუთხე);
}

მაგალითი

მოდით, ჩვენი გამოსახულებისთვის დავაყენოთ ფერიანობა 150deg-ის ტოლი:

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

Результат:

მაგალითი

ახლა დავაყენოთ გამოსახულების ფერიანობა 50deg-ის ტოლი:

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

Результат:

მაგალითი

მოდით არ დავაყენოთ მნიშვნელობა თვისებაში hue-rotate:

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

Результат:

იხილეთ აგრეთვე