Πώς να εμφανίσετε κείμενο σε εικόνα Με το μείγμα CSS3 mix-mode
Εικόνες φόντου φαίνονται πολύ πίσω από τα μεγάλα κείμενα της οθόνης. Ωστόσο, η εφαρμογή του CSS δεν είναι τόσο απλή. Μπορούμε να χρησιμοποιήσουμε το Κλιπ φόντου: κείμενο. ιδιοκτησίας, ωστόσο εξακολουθεί να είναι ένα πειραματικό χαρακτηριστικό χωρίς επαρκή υποστήριξη προγράμματος περιήγησης.
Η εναλλακτική λύση CSS για την εμφάνιση ενός φόντου εικόνας πίσω από ένα κείμενο είναι χρησιμοποιώντας το mix-mode ιδιοκτησία. Λειτουργίες συγχώνευσης για στοιχεία HTML υποστηρίζονται αρκετά σε όλα τα σύγχρονα προγράμματα περιήγησης για επιτραπέζιους και κινητούς υπολογιστές, με εξαίρεση μερικούς, όπως ο Internet Explorer.
Σε αυτή την ανάρτηση, θα δούμε πώς mix-mode (δύο από τους τρόπους λειτουργίας της) και πώς μπορείτε να το χρησιμοποιήσετε εμφάνιση ενός κειμένου με φόντο φόντου σε δύο περιπτώσεις χρήσης:
- όταν η εικόνα φόντου μπορεί να ειδωθεί μέσω του κειμένου
- όταν η εικόνα φόντου τρέχει γύρω το κείμενο
Δείτε μερικά παραδείγματα στο παρακάτω demo (οι εικόνες είναι από το unsplash.com).
ο mix-mode Η ιδιότητα CSS ορίζει πώς περιεχόμενο και το φόντο ενός στοιχείου HTML πρέπει αναμειγνύονται μαζί με χρώμα.
Ρίξτε μια ματιά στη λίστα των τρόπων ανάμειξης, από τα οποία θα χρησιμοποιήσουμε πολλαπλασιάζω και οθόνη σε αυτή τη θέση.
Πρώτον, ας δούμε πώς λειτουργούν αυτές οι δύο συγκεκριμένες λειτουργίες μίξης.
Πως πολλαπλασιάζω & & οθόνη οι λειτουργίες συνδυασμού λειτουργούν
Οι τρόποι συγχώνευσης τεχνικά είναι λειτουργίες που υπολογίστε μια τελική τιμή χρώματος χρησιμοποιώντας τα συστατικά χρώματος ενός στοιχείου και του σκηνικού του.
ο πολλαπλασιάζω λειτουργία ανάμειξης
Στο πολλαπλασιάζω blend, τα μεμονωμένα χρώματα των στοιχείων και τα σκηνικά τους είναι πολλαπλασιασμένο, και το προκύπτον χρώμα εφαρμόζεται στην τελική μεικτή έκδοση.
ο πολλαπλασιάζω mode blend υπολογίζεται σύμφωνα με τον ακόλουθο τύπο:
Β (Cb, Cs) = CbxCs
όπου:Cb - Έγχρωμη συνιστώσα του σκηνικούCs - Έγχρωμη συνιστώσα του στοιχείου προέλευσηςσι - Λειτουργία ανάμειξης
Πότε Cb και Cs πολλαπλασιάζονται, το προκύπτον χρώμα είναι ένα μίγμα αυτών των δύο χρωμάτων και είναι όσο το πιο σκοτεινό από τα δύο χρώματα.
Για να δημιουργήσουμε το υπόβαθρο εικόνας κειμένου, πρέπει να επικεντρωθούμε στην περίπτωση όταν Cs (το στοιχείο χρώματος του στοιχείου προέλευσης) είναι είτε μαύρο είτε λευκό.
Αν Cs είναι μαύρος η αξία του είναι 0, το χρώμα εξόδου θα είναι επίσης μαύρο, επειδή Cb × 0 = 0. Έτσι, όταν το στοιχείο είναι μαύρο χρώμα, αυτό δεν έχει σημασία ποιο χρώμα είναι το σκηνικό, το μόνο που μπορούμε να δούμε μετά το μείγμα είναι μαύρο.
Αν Cs είναι λευκό η αξία του είναι 1, το χρώμα εξόδου είναι οτιδήποτε Cb είναι επειδήCb × 1 = Cb. Έτσι, σε αυτή την περίπτωση βλέπουμε το σκηνικό άμεσα ως έχει.
ο οθόνη λειτουργία ανάμειξης
ο οθόνη η λειτουργία ανάμειξης λειτουργεί παρόμοια με το πολλαπλασιάζω λειτουργία ανάμειξης, αλλά με το αντίθετο αποτέλεσμα. Ετσι, ένα μαύρο προσκήνιο δείχνει το σκηνικό ως έχει, και ένα το λευκό προσκήνιο δείχνει λευκό με οποιοδήποτε σκηνικό.
Ας δούμε γρήγορα τον τύπο του:
Β (Cb, Cs) = Cb + Cs - (CbxCs)
Πότε Cs είναι μαύρος (0), το χρώμα της σκηνής θα εμφανιστεί μετά την ανάμειξη, όπως:
Cb + 0 - (Cb χ 0) = Cb + 0 - 0 = Cb
Πότε Cs είναι λευκό (1) το αποτέλεσμα θα είναι λευκό με οποιοδήποτε σκηνικό, όπως:
Cb + 1 - (Cb χ 1) = Cb + 1 - Cb = 1
1. Εικόνα που εμφανίζεται μέσω κειμένου
Για να εμφανίσετε κείμενο που εμφανίζεται μέσω της εικόνας φόντου, χρησιμοποιούμε το οθόνη λειτουργία ανάμειξης με μαύρο κείμενο και λευκό περιβάλλον χώρο.
Νερό
.φόντο πλάτος: 600px; ύψος: 210px; εικόνα φόντου: url (someimage.jpg); μέγεθος φόντου: 100%. περιθώριο: αυτόματη; .text χρώμα: μαύρο; φόντο-χρώμα: άσπρο; mix-mode-mode: οθόνη? πλάτος: 100%. ύψος: 100%. μέγεθος γραμματοσειράς: 160pt; γραμματοσειρά-βάρος: πιο τολμηρή? κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 210px; περιθώριο: 0;
Προς το παρόν το κείμενό μας μοιάζει με παρακάτω, στο επόμενο βήμα θα προσθέσουμε προσαρμοσμένο χρώμα στο παρασκήνιο.
Προσθήκη χρώματος
Όπως ίσως έχετε μαντέψει μέχρι τώρα, χρησιμοποιώντας τα modes blend αφήστε μας μόνο δύο επιλογές χρωμάτων για την περιοχή που περιβάλλει το κείμενο - μαύρο ή άσπρο. Ωστόσο με λευκό, είναι δυνατό να προσθέσετε κάποιο χρώμα σε αυτό χρησιμοποιώντας μια επικάλυψη, εάν το χρώμα επικάλυψης ταιριάζει καλά με την εικόνα που χρησιμοποιείται.
Για να προσθέσετε χρώμα στη γύρω περιοχή, προσθέστε ένα Νερό Με αυτήν την τεχνική, θα μπορούσαμε να χρωματίσουμε τη γύρω περιοχή γύρω από το κείμενο με το υπόβαθρο της εικόνας: Σημειώστε ότι η τεχνική λειτουργεί καλά μόνο με λεπτές διαφανείς αποχρώσεις. Εάν χρησιμοποιείτε ένα πλήρως αδιαφανές χρώμα ή ένα χρώμα που δεν ταιριάζει με την εικόνα, η εικόνα που εμφανίζεται μέσα στο κείμενο θα έχει μια πολύ ορατή απόχρωση του χρώματος που χρησιμοποιείται, οπότε αν δεν είναι ένα βλέμμα που πηγαίνετε για, αποφύγετε τα αδιαφανή χρώματα. Παρόλο που μια κανονική τοποθέτηση κειμένου πάνω από ένα φόντο εικόνας απαιτεί την ίδια τεχνική, Θα σας δείξω ένα παράδειγμα για το πώς φαίνεται το παραπάνω demo όταν το το αποτέλεσμα αντιστρέφεται, όταν το χρώμα κειμένου είναι λευκό και το φόντο είναι μαύρο. Μπορείτε να χρησιμοποιήσετε το ίδια επικάλυψη για να προσθέσετε κάποιο χρώμα στο κείμενο, εκτός αν θέλετε να το κρατήσετε λευκό. Και κάτω μπορείτε να δείτε πώς φαίνεται η αντίστροφη περίπτωση: Σημειώστε ότι στον Internet Explorer ή σε οποιοδήποτε άλλο πρόγραμμα περιήγησης που δεν υποστηρίζει το mix-mode-mode: πολλαπλασιάζονται ιδιότητα για την επικάλυψη, καθώς βοηθά το χρώμα φόντου της επικάλυψης αναμιγνύετε λίγο καλύτερα με την εικόνα να εμφανίζεται μέσα στο κείμενο.
.επικάλυψη χρώμα-φόντο: rgba (0,255,255, .1); mix-mode-mode: πολλαπλασιασμός; πλάτος: 100%. ύψος: 100%. θέση: απόλυτη; αρχή: 0;
2. Κείμενο που περιβάλλεται από φόντο φόντου
.κείμενο χρώμα: λευκό; φόντο-χρώμα: μαύρο; mix-mode-mode: οθόνη? πλάτος: 100%. ύψος: 100%. μέγεθος γραμματοσειράς: 160pt; γραμματοσειρά-βάρος: πιο τολμηρή? κείμενο-ευθυγράμμιση: κέντρο; γραμμή-ύψος: 210px; περιθώριο: 0;
.επικάλυψη χρώμα-φόντο: rgba (0,255,255, .1); mix-mode-mode: πολλαπλασιασμός; πλάτος: 100%. ύψος: 100%. θέση: απόλυτη; αρχή: 0;
mix-mode ιδιοκτησίας, το φόντο της εικόνας δεν θα εμφανιστεί και το κείμενο θα παραμείνει μαύρο (ή λευκό).
