ფუნქცია hue-rotate

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

სინტაქსი

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

მაგალითი

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

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

მაგალითი

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

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

მაგალითი

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

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

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

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

ფუნქცია blur,
რომელიც აბუნდოვნებს ფონს
ფუნქცია brightness,
რომელიც აძლევს სიკაშკაშეს ფონს
ფუნქცია contrast,
რომელიც აძლევს კონტრასტულობას ფონს
ფუნქცია drop-shadow,
რომელიც აძლევს ჩრდილს ფონს
ფუნქცია invert,
რომელიც ინვერტირებს ფონის ფერებს
ფუნქცია opacity,
რომელიც აძლევს გამჭვირვალობას ფონს
ფუნქცია sepia,
რომელიც გარდაქმნის ფონს სეპიაში
თვისება background,
რომელიც წარმოადგენს შემოკლებულ თვისებას ფონისთვის
თვისება background-image,
რომლის საშუალებითაც ბლოკს შეუძლია მიიღოს ფონური სურათი
თვისება filter,
რომელიც აძლევს სტილს ფონისთვის