Λειτουργία φόντου-μείγματος - CSS-Κόλπα

Η background-blend-modeιδιότητα καθορίζει πώς background-imageπρέπει να συνδυάζεται ένα στοιχείο με background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Δείτε τη λειτουργία φόντου-συνδυασμού στυλό από CSS-Tricks (@ css-tricks) στο CodePen.

Στην παραπάνω επίδειξη, η προεπιλογή background-imageστα αριστερά δεν έχει οριστεί λειτουργία ανάμειξης και έτσι η εικόνα επικαλύπτει το background-color. Στα δεξιά όμως, η λειτουργία ανάμειξης έχει τροποποιήσει το background-imageμε το κόκκινο background-colorαπό κάτω. Ωστόσο, σημειώστε ότι το χρώμα του κειμένου δεν έχει επηρεαστεί από αυτήν την πρόσθετη ιδιότητα.

Αξίες

initial: η προεπιλεγμένη τιμή χωρίς ανάμειξη.
inherit: κληρονομεί τη λειτουργία ανάμειξης του γονικού στοιχείου.
: μια τιμή που θα αλλάξει την εικόνα φόντου ανάλογα με το χρώμα φόντου της.

Η τιμή μπορεί να οριστεί ως οποιοδήποτε από τα ακόλουθα (στις επιδείξεις κάτω από το background-colorείναι κόκκινο):

`luminosity`: διατηρείται η φωτεινότητα του κορυφαίου χρώματος ενώ χρησιμοποιείται ο κορεσμός και η απόχρωση του χρώματος φόντου.

Διαδήλωση

Ακολουθεί ένα λειτουργικό παράδειγμα για το πώς ερμηνεύονται αυτές οι τιμές ανάλογα με background-color:

Δείτε τη λειτουργία ανάμειξης φόντου πένας από CSS-Tricks (@ css-tricks) στο CodePen.

Αλυσίδα πολλαπλών λειτουργιών ανάμειξης

Κάθε επίπεδο φόντου μπορεί να έχει μόνο μία λειτουργία ανάμειξης, ωστόσο εάν χρησιμοποιούμε πολλές γραμμικές κλίσεις για παράδειγμα, καθένας από αυτούς μπορεί να έχει τη δική του λειτουργία ανάμειξης που δημιουργεί μια ενδιαφέρουσα οθόνη:

Δείτε το Pen Gradients και τη λειτουργία συνδυασμού φόντου από CSS-Tricks (@ css-tricks) στο CodePen.

Αυτό επιτυγχάνεται με την καταχώριση αυτών των τιμών με τη σειρά του επιπέδου φόντου που θέλετε να πραγματοποιήσετε:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Η πρώτη γραμμική κλίση έχει τη screenλειτουργία ανάμειξης, ακολουθούμενη από τη δεύτερη γραμμική κλίση που έχει differenceκαι την πρώτη εικόνα φόντου που έχει lightenεφαρμοστεί σε αυτήν.