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

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

Σύνταξη

επιλογέας {
	background-blend-mode: λειτουργίες;
}

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

Τιμές

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

Παράδειγμα

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

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

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Τώρα ας αλλάξουμε την τιμή της ιδιότητας background-blend-mode σε multiply:

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

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας ορίσουμε για την εικόνα μας τη λειτουργία screen:

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

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Δείτε επίσης

η ιδιότητα background,
που αποτελεί συντόμευση για τις ιδιότητες φόντου
η ιδιότητα background-image,
με την οποία μπορεί να οριστεί μια εικόνα φόντου σε ένα block
η ιδιότητα mix-blend-mode,
με την οποία μπορούν να επικαλυφθούν τα βασικά χρώματα πάνω στην εικόνα φόντου
η ιδιότητα backdrop-filter,
που επιτρέπει την εφαρμογή φίλτρων