Mix-blend-mode - CSS-Κόλπα

Η mix-blend-modeιδιότητα καθορίζει πώς το περιεχόμενο ενός στοιχείου πρέπει να συνδυάζεται με το φόντο του. Για παράδειγμα, το κείμενο ενός

θα μπορούσε να συνδυαστεί με το φόντο πίσω του με ενδιαφέροντες τρόπους.

.blend ( mix-blend-mode: exclusion; )

Στο παραπάνω παράδειγμα, το περιεχόμενο έχει τροποποιηθεί mix-blend-modeέτσι ώστε τα χρώματα του κειμένου να αποκλείονται από το φόντο του. Αυτή είναι μόνο μία από τις πολλές τιμές για αυτήν την ιδιότητα.

Υπάρχει ένα πρόβλημα με το Chrome 58+ όπου mix-blend-modeδεν θα αποδίδονται σε στοιχεία που έχουν ρυθμιστεί σε διαφανή . Έχει εκδοθεί ως έκδοση 711955 στο Chrome, το οποίο έχει εκχωρηθεί κατά τη στιγμή αυτής της γραφής. Εν τω μεταξύ, μια απλή λύση είναι να αντιστοιχίσετε ένα λευκό (ή πραγματικά, οποιοδήποτε) χρώμα φόντου στο στοιχείο αμαξώματος.

Αξίες

initial: η προεπιλεγμένη ρύθμιση της ιδιότητας που δεν ορίζει λειτουργία ανάμειξης.
inherit: ένα στοιχείο θα κληρονομήσει τη λειτουργία ανάμειξης από το γονικό του στοιχείο.
unset: αφαιρεί την τρέχουσα λειτουργία ανάμειξης από ένα στοιχείο.
: αυτό είναι το χαρακτηριστικό ενός από τους τρόπους ανάμειξης κάτω από:
normal: αυτό το χαρακτηριστικό δεν ισχύει καθόλου.
multiply: το στοιχείο πολλαπλασιάζεται με το φόντο και αντικαθιστά το χρώμα του φόντου. Το προκύπτον χρώμα είναι πάντα τόσο σκούρο όσο το φόντο.
screen: πολλαπλασιάζει το φόντο και το περιεχόμενο συμπληρώνει το αποτέλεσμα. Αυτό θα έχει ως αποτέλεσμα περιεχόμενο που είναι πιο φωτεινό από το background-color.
επικάλυψη: πολλαπλασιάζει ή ελέγχει το περιεχόμενο ανάλογα με το χρώμα του φόντου. Αυτό είναι το αντίστροφο της λειτουργίας ανάμειξης σκληρού φωτός.
darken: το φόντο αντικαθίσταται με το περιεχόμενο όπου το περιεχόμενο είναι πιο σκοτεινό, διαφορετικά, αφήνεται όπως ήταν.
lighten: το φόντο αντικαθίσταται με το περιεχόμενο όπου το περιεχόμενο είναι ελαφρύτερο.
color-dodge: αυτό το χαρακτηριστικό φωτίζει το χρώμα του φόντου για να αντικατοπτρίζει το χρώμα του περιεχομένου.
color-burn: αυτό σκουραίνει το φόντο για να αντικατοπτρίζει το φυσικό χρώμα του περιεχομένου.
hard-light: ανάλογα με το χρώμα του περιεχομένου, αυτό το χαρακτηριστικό θα το εμφανίσει ή θα το πολλαπλασιάσει.
soft-light: ανάλογα με το χρώμα του περιεχομένου, αυτό θα σκουραίνει ή θα το φωτίζει.
difference: αφαιρεί το πιο σκούρο από τα δύο χρώματα από το ελαφρύτερο χρώμα.
exclusion: παρόμοιο με differenceαλλά με χαμηλότερη αντίθεση.
hue: δημιουργεί ένα χρώμα με την απόχρωση του περιεχομένου σε συνδυασμό με τον κορεσμό και τη φωτεινότητα του φόντου.
saturation: δημιουργεί ένα χρώμα με τον κορεσμό του περιεχομένου σε συνδυασμό με την απόχρωση και τη φωτεινότητα του φόντου.
color: δημιουργεί ένα χρώμα με την απόχρωση και τον κορεσμό του περιεχομένου και τη φωτεινότητα του φόντου.
luminosity: δημιουργεί ένα χρώμα με τη φωτεινότητα του περιεχομένου και την απόχρωση και τον κορεσμό του φόντου. Αυτό είναι το αντίστροφο του colorχαρακτηριστικού.

Αξίζει να σημειωθεί ότι η ρύθμιση μιας λειτουργίας συνδυασμού διαφορετική από αυτήν normalθα δημιουργήσει ένα νέο περιβάλλον στοίβαξης το οποίο στη συνέχεια πρέπει να αναμειχθεί με το περιβάλλον στοίβαξης που περιέχει το στοιχείο.

Το αποτέλεσμα αυτών των τιμών εμφανίζεται στο παρακάτω demo:

Περισσότερες πληροφορίες

Βασικά στοιχεία λειτουργίας CSS Blend
mix-blend-mode στο MDN
mix-blend-mode στο W3C
Μια συλλογή από επιδείξεις CSS Blend Mode
Γνωριμία με το CSS Blend Modes

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.