Το εφέ ημιδιαφάνειας του στοιχείου είναι καθαρά ορατό στην εικόνα φόντου και έχει γίνει ευρέως διαδεδομένο σε διάφορα λειτουργικά συστήματαγιατί φαίνεται κομψό και όμορφο. Στο σχεδιασμό ιστοσελίδων, η ημιδιαφάνεια χρησιμοποιείται επίσης και επιτυγχάνεται μέσω ιδιότητες αδιαφάνειαςή τη μορφή χρώματος RGBA που έχει οριστεί για το φόντο.
ιδιότητα αδιαφάνειας
Το κύριο χαρακτηριστικό αυτής της ιδιότητας είναι ότι η τιμή διαφάνειας επηρεάζει όλα τα θυγατρικά στοιχεία στο εσωτερικό, όχι μόνο το φόντο. Αυτό σημαίνει ότι τόσο το φόντο όσο και το κείμενο θα γίνουν ημιδιαφανή και δεν θα λειτουργήσει για να αυξηθεί το επίπεδο διαφάνειας προσθέτοντας . Στον πίνακα. Το 1 δείχνει την εμφάνιση του κειμένου και του φόντου με διαφορετικές τιμές αδιαφάνειας.
Το Παράδειγμα 1 δείχνει πώς να δημιουργήσετε ένα ημιδιαφανές πλαίσιο χρησιμοποιώντας αδιαφάνεια.
Παράδειγμα 1: Φόντο σε ιστοσελίδα
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
Συνήθως, βάσει σχεδίου, μόνο το φόντο του στοιχείου πρέπει να είναι ημιδιαφανές και το κείμενο πρέπει να είναι αδιαφανές για να διατηρείται η αναγνωσιμότητά του. Η ιδιότητα αδιαφάνειας δεν ταιριάζει εδώ επειδή το κείμενο μέσα στο στοιχείο θα είναι επίσης μερικώς διαφανές. Είναι καλύτερο να χρησιμοποιείτε τη μορφή RGBA, μέρος της οποίας είναι το κανάλι άλφα, ή με άλλα λόγια η τιμή διαφάνειας. Η τιμή γράφεται rgba και, στη συνέχεια, οι τιμές των κόκκινων, μπλε και πράσινων στοιχείων του χρώματος παρατίθενται σε παρενθέσεις χωρισμένες με κόμμα. Τελευταία έρχεται η διαφάνεια, η οποία ορίζεται από το 0 έως το 1 (Εικ. 1), ενώ το 0 σημαίνει πλήρης διαφάνεια και το 1 σημαίνει αδιαφάνεια του χρώματος.
Ρύζι. 1. Σύνταξη χρήσης rgba
Το Παράδειγμα 2 δείχνει τη χρήση της μορφής RGBA για τη δημιουργία ημιδιαφανούς φόντου.
Παράδειγμα 2: Ημιδιαφανές φόντο
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2. Η τιμή αδιαφάνειας για το φόντο έχει οριστεί στο 90%.
Ρύζι. 2. Ημιδιαφανές φόντο και αδιαφανές κείμενο
Δημιουργία διαφανούς φόντου σε HTML και CSS (αδιαφάνεια και εφέ RGBA)
επίδραση ημιδιαφάνειαςΤο στοιχείο είναι καθαρά ορατό στην εικόνα φόντου και έχει γίνει ευρέως διαδεδομένο σε διαφορετικά λειτουργικά συστήματα, επειδή φαίνεται κομψό και όμορφο. Το κύριο πράγμα είναι να μην υπάρχει ένα μονόχρωμο σχέδιο κάτω από τα ημιδιαφανή μπλοκ, αλλά μια εικόνα, σε αυτή την περίπτωση η διαφάνεια γίνεται αισθητή.
Αυτό το αποτέλεσμα επιτυγχάνεται διαφορετικοί τρόποι, συμπεριλαμβανομένων παλιών τεχνικών, όπως η χρήση μιας εικόνας PNG ως φόντο, η δημιουργία μιας καρώ εικόνας και η χρήση της ιδιότητας αδιαφάνειας. Αλλά μόλις καταστεί απαραίτητο να φτιάξετε ένα ημιδιαφανές φόντο στο μπλοκ, αυτές οι μέθοδοι έχουν δυσάρεστα μειονεκτήματα.
Σκεφτείτε τη διαφάνεια του κειμένου και του φόντου - πώς να το χρησιμοποιήσετε σωστά στη σχεδίαση ιστότοπου:
Το κύριο χαρακτηριστικό αυτής της ιδιότητας είναι ότι η τιμή διαφάνειας επηρεάζει όλα τα θυγατρικά στοιχεία στο εσωτερικό, όχι μόνο το φόντο. Αυτό σημαίνει ότι τόσο το φόντο όσο και το κείμενο θα γίνουν ημιδιαφανή. Μπορείτε να αυξήσετε το επίπεδο διαφάνειας αλλάζοντας την εντολή αδιαφάνειας από 0,1 σε 1.
HTML 5 CSS 3 IE 9
Στη σχεδίαση ιστοσελίδων, χρησιμοποιείται επίσης μερική διαφάνεια και επιτυγχάνεται μέσω της χρωματικής μορφής RGBA, η οποία ορίζεται μόνο για το φόντο του στοιχείου.
Συνήθως σε ένα σχέδιο, μόνο το φόντο ενός στοιχείου πρέπει να είναι ημιδιαφανές και το κείμενο πρέπει να είναι αδιαφανές για να διατηρείται ευανάγνωστο. Η ιδιότητα αδιαφάνειας δεν ταιριάζει εδώ επειδή το κείμενο μέσα στο στοιχείο θα είναι επίσης μερικώς διαφανές. Είναι καλύτερο να χρησιμοποιείτε τη μορφή RGBA, μέρος της οποίας είναι το κανάλι άλφα, ή με άλλα λόγια η τιμή διαφάνειας. Η τιμή γράφεται rgba και, στη συνέχεια, οι τιμές των κόκκινων, μπλε και πράσινων στοιχείων του χρώματος παρατίθενται σε αγκύλες διαχωρισμένες με κόμματα. Τελευταία έρχεται η διαφάνεια, η οποία ορίζεται από το 0 στο 1, με το 0 να είναι πλήρως διαφανές και το 1 να είναι αδιαφανές, η σύνταξη για την εφαρμογή του rgba.
Ημιδιαφανές φόντο HTML 5 CSS 3 IE 9
Καλημέρα, geeks ανάπτυξης ιστοσελίδων, καθώς και οι αρχάριοι του. Για όσους δεν ακολουθούν τις τάσεις στον τομέα της πληροφορικής, ή μάλλον της μόδας του διαδικτύου, θέλω να ανακοινώσω επίσημα ότι αυτή η δημοσίευση έχει θέμα: «Πώς να κάνετε μια διαφανή μπλοκ cssεργαλεία" ακριβώς στην ώρα για εσάς. Πράγματι, το τρέχον 2016, η εισαγωγή διαφόρων διαφανών αντικειμένων στις διαδικτυακές υπηρεσίες θεωρείται μια κομψή κίνηση.
Ως εκ τούτου, σε αυτό το άρθρο θα σας πω για όλα υπάρχουσες μεθόδουςδημιουργώντας διαφάνεια, ξεκινώντας από προκατακλυσμιαίες λύσεις, θα εστιάσω στη συμβατότητα των λύσεων με προγράμματα περιήγησης και θα δώσω επίσης συγκεκριμένα παραδείγματα κώδικα προγράμματος. Και τώρα στη δουλειά!
Μέθοδος 1. Προκατακλυσμιαία
Πότε ήταν εκεί αδύναμοι υπολογιστέςΚαι η "ικανότητα" δεν έχει αναπτυχθεί, οι προγραμματιστές έχουν βρει τον δικό τους τρόπο δημιουργίας ενός διαφανούς φόντου: τη χρήση διαφανών pixel με τη σειρά τους με έγχρωμα. Το μπλοκ που δημιουργήθηκε με αυτόν τον τρόπο έμοιαζε με σκακιέρα όταν κλιμακώνονταν, αλλά σε κανονικό μέγεθος έμοιαζε με κάποιο είδος διαφάνειας.
Αυτό, κατά τη γνώμη μου, "δεκανίκι" φυσικά βοηθάει σε παλαιότερες εκδόσεις προγραμμάτων περιήγησης στις οποίες οι σύγχρονες λύσεις δεν λειτουργούν. Αξίζει όμως να σημειωθεί ότι η ποιότητα της εμφάνισης κειμένου , εγγεγραμμένο σε τέτοια , πέφτει απότομα.
Μέθοδος 2. Δεν συγχέεται
Σε σπάνιες περιπτώσεις, οι προγραμματιστές λύνουν το πρόβλημα με την εισαγωγή μιας ημιδιαφανούς εικόνας εισάγοντας ... μια ήδη τελειωμένη ημιδιαφανή εικόνα! Για αυτό, χρησιμοποιούνται εικόνες που είναι αποθηκευμένες σε μορφή PNG-24. Αυτή η μορφή γραφικών σάς επιτρέπει να ορίσετε 256 επίπεδα ημιδιαφάνειας.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Ωστόσο, αυτή η μέθοδος δεν είναι βολική για διάφορους λόγους:
- Internet ExplorerΤο 6 δεν λειτουργεί με αυτήν την τεχνολογία, πρέπει να γράψετε κώδικα σεναρίου για αυτό.
- Δεν μπορείτε να αλλάξετε τα χρώματα φόντου στο css.
- Εάν η λειτουργία εμφάνισης εικόνας είναι απενεργοποιημένη στο πρόγραμμα περιήγησης, θα εξαφανιστεί.
Μέθοδος 3. Προωθήθηκε
Ο πιο συνηθισμένος και γνωστός τρόπος για να κάνετε ένα μπλοκ διαφανές είναι το ακίνητο αδιαφάνεια.
Η τιμή της παραμέτρου ποικίλλει στο εύρος , όπου στο 0 το αντικείμενο είναι αόρατο και στο 1 εμφανίζεται πλήρως. Ωστόσο, εδώ υπάρχουν μερικές δυσάρεστες στιγμές.
Πρώτον, όλα τα θυγατρικά στοιχεία κληρονομούν τη διαφάνεια. Και αυτό σημαίνει ότι το εγγεγραμμένο κείμενο θα «διαφανεί» μαζί με το φόντο.
Δεύτερον, ο Internet Explorer ανοίγει ξανά τη μύτη του και μέχρι την έκδοση 8 δεν λειτουργεί με αδιαφάνεια.
Για να λύσετε αυτό το πρόβλημα, χρησιμοποιήστε φίλτρο:άλφα (Αδιαφάνεια=τιμή).
Εξετάστε ένα παράδειγμα.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Μέθοδος 4. Σύγχρονη
Σήμερα, οι επαγγελματίες χρησιμοποιούν το εργαλείο rgba (r, g, b, a).
Πριν από αυτό, είπα ότι το RGB είναι ένα από τα δημοφιλή μοντέλα χρωμάτων, όπου το R είναι υπεύθυνο για όλες τις αποχρώσεις του κόκκινου, το G - αποχρώσεις του πράσινου και το B - αποχρώσεις του μπλε.
Στην περίπτωση της παραμέτρου css, η μεταβλητή Α είναι υπεύθυνη για το κανάλι άλφα, το οποίο με τη σειρά του είναι υπεύθυνο για τη διαφάνεια.
Κύριο πλεονέκτημα ο τελευταίος τρόπος- το κανάλι άλφα δεν επηρεάζει αντικείμενα μέσα στο μπλοκ με στυλ.
Το rgba (r, g, b, a) υποστηρίζεται αφού:
- 10 εκδόσεις της Opera.
- Internet Explorer 9;
- Safari 3.2;
- 3 εκδόσεις του Firefox.
Θέλω να σημειώσω ενδιαφέρον γεγονός! Ο αγαπημένος Internet Explorer 7 παρουσιάζει ένα σφάλμα κατά το συνδυασμό μιας ιδιότητας χρώμα του φόντουμε το όνομα των χρωμάτων (φόντο-χρώμα: χρυσό). Επομένως, θα πρέπει να χρησιμοποιείτε μόνο:
χρώμα φόντου: rgba(255, 215, 0, 0,15)
Και τώρα ένα παράδειγμα.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Στο κατάστημά μας θα βρείτε όλων των ειδών τα λουλούδια.
|
σημειώστε ότι περιεχόμενο κειμένουΤο μπλοκ είναι εντελώς ορατό (100% μαύρο), ενώ το φόντο έχει οριστεί σε κανάλι άλφα 0,88, δηλ. 88%.
Αυτή η ανάρτηση έφτασε στο τέλος της. Εγγραφείτε στο blog μου και μην ξεχάσετε να προσκαλέσετε τους φίλους σας. Καλή τύχη με την εκμάθηση γλωσσών Ιστού! Αντίο!
Βλαντ Μέρζεβιτς
Η μερική διαφάνεια, όταν χρησιμοποιείται σωστά, φαίνεται πολύ εντυπωσιακή στο σχεδιασμό της ιστοσελίδας. Το κύριο πράγμα είναι ότι κάτω από τα ημιδιαφανή μπλοκ δεν πρέπει να υπάρχει ένα μονόχρωμο μοτίβο, αλλά μια εικόνα, σε αυτή την περίπτωση η διαφάνεια γίνεται αισθητή. Αυτό το εφέ επιτυγχάνεται με πολλούς τρόπους και αν θυμάστε τα πάντα, συμπεριλαμβανομένων των παλιομοδίτικών μεθόδων, τότε αυτό είναι η χρήση μιας εικόνας PNG ως φόντο, η δημιουργία μιας καρώ εικόνας και η ιδιότητα αδιαφάνειας. Αλλά μόλις καταστεί απαραίτητο να φτιάξετε ένα ημιδιαφανές φόντο στο μπλοκ, αυτές οι μέθοδοι έχουν ένα δυσάρεστο μειονέκτημα. Θα κάνω μια σύντομη ανασκόπηση ώστε να καταστεί σαφές τι διακυβεύεται, καθώς και για όσους αναγνώστες δεν είναι εξοικειωμένοι με τις μη παραδοσιακές επιλογές για τη δημιουργία εφέ ημιδιαφάνειας.
PNG ως φόντο
ΣΕ επεξεργαστής γραφικώνπροετοιμάζεται προκαταρκτικά ένα μονόχρωμο ημιδιαφανές σχέδιο, το οποίο αποθηκεύεται σε μορφή PNG-24 (Εικ. 1). Ένα χαρακτηριστικό αυτής της μορφής είναι η υποστήριξη για 256 επίπεδα διαφάνειας, ή απλά μιλώντας, μπορεί να εμφανίζει ημιδιαφανείς εικόνες.
Ρύζι. 1. Εικόνα για δημιουργία φόντου
Στη συνέχεια προσθέτουμε μια εικόνα ως φόντο μέσω της ιδιότητας φόντου, όπως φαίνεται στο παράδειγμα 1.
Παράδειγμα 1: Χρήση ημιδιαφανούς σχεδίου
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 3.
Ρύζι. 2. Εφαρμογή ταπετσαρίας
Το παλαιό πρόγραμμα περιήγησης Internet Explorer 6 δεν λειτουργεί με ημιδιαφάνεια στο PNG-24, εάν για κάποιο λόγο χρειαστεί να υποστηρίξετε αυτό το πρόγραμμα περιήγησης, θα πρέπει να χρησιμοποιήσετε σενάρια για αυτό.
Η μέθοδος που παρουσιάζεται έχει ορισμένους περιορισμούς. Έτσι, όταν απενεργοποιείτε τις εικόνες στο πρόγραμμα περιήγησης, το φόντο θα εξαφανιστεί εντελώς. Επιπλέον, δεν είναι τόσο εύκολο να αλλάξετε το χρώμα φόντου και την τιμή διαφάνειας, για αυτό θα πρέπει να επεξεργαστείτε ξανά την εικόνα.
καρό εικόνα
Αυτή η μέθοδος ανήκει στους αρχαίους τρόπους εφαρμογής της ημιδιαφάνειας, όταν τα προγράμματα περιήγησης «δεν μπορούσαν να κάνουν τίποτα» και έπρεπε να αναζητήσετε λύσεις χωρίς πρότυπο. Το κόλπο είναι να δημιουργήσετε μια εικόνα που εναλλάσσεται μεταξύ διαφανών και αδιαφανών pixel (Εικόνα 3). Μια τέτοια κανονική δομή δημιουργεί το αποτέλεσμα της ημιδιαφάνειας, ουσιαστικά μιμούμενο.
Ρύζι. 3. Μεγεθυσμένο καρό σχέδιο
Εδώ είναι πώς φαίνεται στο τέλος (Εικ. 4).
Ρύζι. 4. Απομίμηση ημιδιαφάνειας
Τα μειονεκτήματα αυτής της μεθόδου είναι συγκρίσιμα με την προηγούμενη, μπορεί επίσης να προκύψουν μοτίβα moire και να συμβεί υποβάθμιση του κειμένου.
ιδιότητα αδιαφάνειας
Η ιδιότητα αδιαφάνειας CSS 3 ορίζει την τιμή διαφάνειας και κυμαίνεται από 0 έως 1, όπου το μηδέν είναι η πλήρης διαφάνεια του στοιχείου και το ένα, αντίθετα, η αδιαφάνεια. Η ιδιότητα αδιαφάνειας έχει ένα χαρακτηριστικό - η διαφάνεια κατανέμεται σε όλα τα θυγατρικά στοιχεία και δεν μπορούν να υπερβαίνουν την τιμή διαφάνειας του γονέα τους. Αποδεικνύεται ότι δεν μπορεί να υπάρχει αδιαφανές κείμενο σε ημιδιαφανές φόντο (παράδειγμα 2).
Παράδειγμα 2: Χρήση αδιαφάνειας
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 5.
Ρύζι. 5. Διαφάνεια κειμένου και φόντου
Στον Internet Explorer έως και την έκδοση 8.0, η αδιαφάνεια δεν λειτουργεί, επομένως χρησιμοποιείται η ιδιότητα φίλτρου για συγκεκριμένο πρόγραμμα περιήγησης. Φυσικά, καταλήγει σε μη έγκυρο κώδικα CSS.
RGBA
Η σύγχρονη προσέγγιση είναι πολύ πιο απλή και οπτική από τις παραπάνω μεθόδους και συνίσταται στη χρήση της μορφής RGBA για χρώμα και φόντο. Τα τρία πρώτα γράμματα είναι γνωστά σε πολλούς και αντιπροσωπεύουν κόκκινο, πράσινο, μπλε (κόκκινο, πράσινο, μπλε), το τελευταίο συμβολίζει το κανάλι άλφα και ορίζει τη διαφάνεια του στοιχείου. Η μορφή εγγραφής είναι αυτή.
χρώμα φόντου: rgba(r, g, b, a);
Σε αγκύλες, αντί για γράμματα, τοποθετείται η τιμή του στοιχείου χρώματος, μπορεί να προβληθεί σε οποιοδήποτε πρόγραμμα επεξεργασίας γραφικών, η τελευταία τιμή ορίζει τη διαφάνεια και ταιριάζει με την τιμή της ιδιότητας αδιαφάνειας.
Δεν υποστηρίζουν όλα τα προγράμματα περιήγησης αυτήν τη μορφή: Internet Explorer από την έκδοση 9, Opera από την έκδοση 10, Firefox από την 3, Safari από την 3.2. Αλλά γενικά, σύγχρονα προγράμματα περιήγησηςεμφανίζει σωστά τη διαφάνεια. Για παλαιότερες εκδόσεις του IE, μπορείτε να καθορίσετε ξεχωριστά το χρώμα στη συνήθη μορφή του, ενώ, φυσικά, δεν θα υπάρχει διαφάνεια. Ή χρησιμοποιήστε ξανά την ιδιότητα φίλτρου, αλλά στη συνέχεια θα πρέπει να ανεχθείτε το γεγονός ότι η διαφάνεια θα επηρεάσει επίσης το κείμενο (παράδειγμα 3). Να συμμορφωθούν έγκυρος κωδικός CSS, χρησιμοποίησα σχόλια υπό όρους.
Παράδειγμα 3: Χρήση RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 6.
Ρύζι. 6. Ημιδιαφανές φόντο με αδιαφανές κείμενο
Συγκρίνετε την εικόνα με την προηγούμενη, τα γράμματα έχουν γίνει πιο φωτεινά και καθαρά.
ΣΕ περιηγητής διαδυκτίουΟ Explorer 7 βρήκε ένα σφάλμα κατά τον συνδυασμό χρώματος φόντου με διαφορετικές τιμές. Για παράδειγμα, εάν ορίσετε το χρώμα φόντου σε κόκκινο, όπως φαίνεται παρακάτω, τότε το φόντο στον IE7 δεν θα εμφανίζεται καθόλου.
Div (χρώμα φόντου: κόκκινο, /* Δεν ισχύει σε IE7 */ χρώμα φόντου: rgba(255, 0, 0, 0,5); )
Αυτό επιλύεται αντικαθιστώντας την ιδιότητα χρώματος φόντου με φόντο .
Div ( φόντο: κόκκινο; /* Και αυτό λειτουργεί */ φόντο: rgba(255, 0, 0, 0.5); ) Ωστόσο, υπάρχει μια προειδοποίηση. Το πρόγραμμα επικύρωσης CSS "ορκίζει" στο παρασκήνιο εάν το ρυθμίσετε σε Μορφή RGBA. Αλλά ταυτόχρονα, ισχύει σωστά για το χρώμα φόντου . Σε γενικές γραμμές, όπως πάντα, πρέπει να επιλέξετε μεταξύ προγραμμάτων περιήγησης και εγκυρότητας.
Περιγραφή
Καθορίζει το χρώμα φόντου ενός στοιχείου. Αν και αυτή η ιδιότητα δεν κληρονομεί τις ιδιότητες του γονέα της, επειδή η αρχική τιμή έχει οριστεί σε διαφανές, το χρώμα φόντου παιδικά στοιχείαταιριάζει με το χρώμα φόντου του γονικού στοιχείου.
Σύνταξη
χρώμα του φόντου:<цвет>| διαφανές | κληρονομώ
Αξίες
διαφανές Ορίζει ένα διαφανές φόντο. inherit Κληρονομεί την αξία του γονέα.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
ΣΕ αυτό το παράδειγμαγια στοιχεία ιστοσελίδας, τρία διάφορους τρόπουςρυθμίσεις χρώματος φόντου. Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.
Ρύζι. 1. Εφαρμόστε χρώμα φόντου
Μοντέλο αντικειμένου
document.getElementById("elementID").style.backgroundColor
Προγράμματα περιήγησης
Ο Internet Explorer έως την έκδοση 7.0 δεν υποστηρίζει την τιμή κληρονομιάς.