Ιδιότητα mix-blend-mode

Η ιδιότητα mix-blend-mode ορίζει τη λειτουργία ανάμειξης του αρχικού χρώματος με το χρώμα φόντου ή την εικόνα φόντου. Οι τιμές για την ιδιότητα είναι ανάλογες με τις κύριες λειτουργίες των γραφικών επεξεργαστών.

Σύνταξη

επιλογέας {
	mix-blend-mode: τιμές;
}

Ο πίνακας παρουσιάζει τις κύριες τιμές για την ιδιότητα mix-blend-mode:

Τιμές

Τιμή	Περιγραφή
`normal`	Κανονική. Δεν χρησιμοποιείται ανάμειξη χρωμάτων. Προεπιλεγμένη λειτουργία.
`multiply`	Πολλαπλασιασμός. Σε αυτή τη λειτουργία, η τιμή του βασικού χρώματος πολλαπλασιάζεται με την τιμή του συνδυασμένου χρώματος. Το προκύπτον χρώμα είναι πάντα ένα πιο σκούρο χρώμα.
`screen`	Φωτισμός. Σε αυτή τη λειτουργία πολλαπλασιάζονται οι αντίστροφες τιμές του βασικού και του συνδυασμένου χρώματος. Ως προκύπτον χρώμα εφαρμόζεται πάντα ένα πιο φωτεινό χρώμα.
`overlay`	Επικάλυψη. Σε αυτή τη λειτουργία τα χρώματα πολλαπλασιάζονται ή φωτίζονται ανάλογα με το βασικό χρώμα. Σχέδια ή χρώματα επικαλύπτουν τα υπάρχοντα pixel, αφήνοντας αμετάβλητες τις φωτεινές και τις σκούρες περιοχές του βασικού χρώματος.

Παράδειγμα

Ας δούμε πώς θα εμφανίζεται μια εικόνα με την προεπιλεγμένη τιμή της ιδιότητας mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Παράδειγμα

Και τώρα ας αλλάξουμε τη λειτουργία ανάμειξης σε πολλαπλασιασμό:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Παράδειγμα

Ας ορίσουμε στην ιδιότητα mix-blend-mode την τιμή επικάλυψης:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Δείτε επίσης

η ιδιότητα background,
που είναι μια συντόμευση για το φόντο
η ιδιότητα background-image,
με την οποία μπορεί να οριστεί μια εικόνα φόντου σε ένα μπλοκ
η ιδιότητα background-blend-mode,
με την οποία μπορεί να γίνει ανάμειξη μιας εικόνας φόντου με ένα χρώμα φόντου