Συνάρτηση 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,
που ορίζει το στυλ για το φόντο