Κάντε ένα ημιδιαφανές φόντο CSS. Διαφάνεια φόντο CSS. Διαφανές υπόβαθρο ή κείμενο χρησιμοποιώντας CSS. Αποδίδουν αδιαφάνεια και φίλτρο
Καλή μέρα, Geeks της ανάπτυξης ιστοσελίδων, καθώς και οι αρχάριοι της. Για εκείνους που δεν ακολουθούν τις τάσεις της περιοχής πληροφορικής ή μάλλον για τη μόδα ιστοσελίδων, θέλω να σας ενημερώσω ότι αυτή η δημοσίευση για το θέμα: "Πώς να κάνετε διαφανές cSS Block Εργαλεία "Εσείς ακριβώς από το δρόμο. Πράγματι, στο σημερινό 2016, η εφαρμογή διαφόρων διαφανών αντικειμένων στις ηλεκτρονικές υπηρεσίες θεωρείται κομψή.
Ως εκ τούτου, σε αυτό το άρθρο, θα σας πω για όλους τους υπάρχοντες τρόπους για να δημιουργήσετε διαφάνεια, που κυμαίνονται από τις λύσεις ντόπινγκ, δημιουργώντας τόνους για τη συμβατότητα των λύσεων με τα προγράμματα περιήγησης, και επίσης να δώσουν συγκεκριμένα παραδείγματα του κώδικα προγράμματος. Τώρα για δουλειά!
Μέθοδος 1. Ενημερώθηκε
Όταν αλλού ήταν Αδύναμοι υπολογιστές Και δεν αναπτύσσονται "ικανότητες", οι προγραμματιστές ήρθαν με το δρόμο τους για να δημιουργήσουν ένα διαφανές υπόβαθρο: χρησιμοποιώντας διαφανή εικονοστοιχεία με στροφές με χρώμα. Έτσι, το δημιουργημένο μπλοκ όταν η κλιμάκωση έμοιαζε σαν σκακιέρα, αλλά στο συνηθισμένο μέγεθος μοιάζει με κάποια διαφάνεια.
Αυτό, κατά τη γνώμη μου, το "Crutch" φυσικά βοηθά σε παλιές εκδόσεις των προγραμμάτων περιήγησης, στις οποίες οι σύγχρονες λύσεις δεν λειτουργούν. Αλλά αξίζει να σημειωθεί ότι η ποιότητα της οθόνης κειμένου , εγγεγραμμένος σε μια τέτοια απότομη πτώση.
Μέθοδος 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 έκδοση δεν λειτουργεί με αδιαφάνεια.
Για την επίλυση αυτού του προβλήματος που χρησιμοποιήθηκε Φίλτρο:άλφα (ΑΦΟΡΑ \u003d ΑΞΙΑ).
Εξετάστε ένα παράδειγμα.
| 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 - αποχρώσεις των πράσινων και β - αποχρώσεις του μπλε.
Σε περίπτωση που Παράμετρος CSS Η μεταβλητή Α είναι υπεύθυνη για το κανάλι άλφα, το οποίο με τη σειρά του είναι υπεύθυνη για τη διαφάνεια.
Το κύριο πλεονέκτημα της τελευταίας μεθόδου - Το κανάλι άλφα δεν επηρεάζει αντικείμενα εντός του στυλιζαρισμένου μπλοκ.
Η RGBA (R, G, B, A) διατηρείται από:
- 10 έκδοση της όπερας;
- Internet Explorer 9;
- Σαφάρι 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 μου και μην ξεχάσετε να προσκαλέσετε φίλους. Εύχομαι καλή τύχη στην εκμάθηση γλωσσών Web! Αντίο!
Για να δημιουργήσετε ένα αποτέλεσμα διαφάνειας στο CSS, χρησιμοποιείται η ιδιότητα της αδιαφάνειας.
Το IE8 Browser και οι προηγούμενες εκδόσεις υποστηρίζουν ένα εναλλακτικό ακίνητο - φίλτρο: άλφα (αδιαφάνεια \u003d x), όπου το "Χ" μπορεί να πάρει μια τιμή από το 0 έως το 100, τόσο μικρότερη είναι η τιμή, όσο πιο διαφανή είναι το στοιχείο.
Όλα τα άλλα προγράμματα περιήγησης υποστηρίζουν το πρότυπο Ακίνητα CSS Η αδιαφάνεια, η οποία μπορεί να ληφθεί ως αξία του αριθμού από 0,0 έως 1,0, τόσο λιγότερη αξία, όσο πιο διαφανή είναι το στοιχείο:
ΔοκιμάστεΔιαφάνεια στο αιωρούμενο
Pseudo-class: Τοποθετήστε το δείκτη σας εμφάνιση Στοιχεία όταν τοποθετείτε το δείκτη του ποντικιού. Θα επωφεληθούμε από αυτή τη δυνατότητα ότι η εικόνα κατά την αιώρηση του ποντικιού χάνει τη διαφάνεια του:
ΔοκιμάστεΦόντο διαφάνειας
Υπάρχουν δύο Πιθανή μέθοδος Δημιουργήστε ένα στοιχείο διαφανή: Η ιδιότητα της αδιαφάνειας που περιγράφεται παραπάνω και υποδεικνύει το χρώμα φόντου στη μορφή RGBA.
Ίσως είστε ήδη εξοικειωμένοι με το μοντέλο αναπαραγωγής χρώματος σε μορφή RGB. RGB (κόκκινο, πράσινο, μπλε - κόκκινο, πράσινο, μπλε) - το σύστημα χρωμάτων, ορίζοντας μια σκιά αναμειγνύοντας κόκκινο, πράσινο και μπλε. Για παράδειγμα, για να ορίσετε ένα κίτρινο χρώμα για κείμενο, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις ακόλουθες διαφημίσεις:
Χρώμα: RGB (255,255,0). Χρώμα: RGB (100%, 100%, 0).
Τα χρώματα που καθορίζονται χρησιμοποιώντας RGB θα διαφέρουν από τις δεκαεξαδικές τιμές που χρησιμοποιούμε πριν αυτό σας επιτρέπουν να χρησιμοποιήσετε το κανάλι διαφάνειας άλφα. Αυτό σημαίνει ότι μέσω του στοιχείου του στοιχείου με τη διαφάνεια άλφα θα δει κανείς τι βρίσκεται κάτω από αυτό.
Η ανακοίνωση του χρώματος RGBA είναι παρόμοια με τη σύνταξη με τους τυπικούς κανόνες RGB. Ωστόσο, μεταξύ άλλων, θα χρειαστεί να δηλώσουμε ως RGBA (αντί για RGB) και να ορίσουμε μια πρόσθετη δεκαδική ανάλυση διαφάνειας μετά την τιμή χρώματος στην περιοχή από 0,0 (πλήρης διαφάνεια) σε 1 (πλήρης αδιαφάνεια).
Χρώμα: RGBA (255,255,0,0,5). Χρώμα: RGBA (100%, 100%, 0,0,5).
Η διαφορά μεταξύ της αδιαφάνειας της αδιαφάνειας και της περιουσίας της RGBA είναι ότι η ιδιοκτησία αδιαφάνειας εφαρμόζει τη διαφάνεια σε ολόκληρο το στοιχείο ολόκληρου του στοιχείου, δηλαδή, ολόκληρο το περιεχόμενο του στοιχείου γίνεται διαφανές. Και η RGBA σάς επιτρέπει να ορίσετε τη διαφάνεια σε μεμονωμένα μέρη του στοιχείου (για παράδειγμα, μόνο κείμενο ή υπόβαθρο):
Σώμα (ICPG) .prim1 (πλάτος: 400px, περιθώριο: 30px 50px, φόντο-χρώμα: #FFFFF, σύνορα: 1px στερεό μαύρο, γραμματοσειρά: τολμηρή, αδιαφάνεια: 0.5; φίλτρο: άλφα (αδιαφάνεια \u003d 70); / * Για IE8 και προηγούμενες εκδόσεις * / κείμενο-ευθυγράμμιση: κέντρο;) .prim2 (πλάτος: 400px; περιθώριο: 30px 50px; φόντο-χρώμα: RGBA (255,255,255,0,5). σύνορα: 1px στερεό μαύρο, γραμματοσειρά: · Κείμενο-Ευθυγράμμιση: Κέντρο;) Δοκιμάστε »
Σημείωση: Οι τιμές RGBA δεν υποστηρίζονται στο πρόγραμμα περιήγησης IE8 και τις προηγούμενες εκδόσεις. Για να δηλώσετε την επιλογή δημιουργίας αντιγράφων ασφαλείας για παλιά προγράμματα περιήγησης που δεν υποστηρίζουν τις χρωματικές τιμές με κανάλια άλφα, θα πρέπει να το καθορίσετε πρώτα στην αξία του RGBA: Ιστορικό: RGB (255,255,0). Ιστορικό: RGBA (255,255,0,0,5).
Η επίδραση της διαφάνειας του στοιχείου είναι καλά αξιοσημείωτη Ιστορικό και πήρε διανομή σε διαφορετικά λειτουργικά συστήματαΕπειδή φαίνεται κομψό και όμορφο. Στο σχεδιασμό ιστοσελίδων, η μεταφραστικότητα εφαρμόζεται επίσης και επιτυγχάνεται λόγω της ιδιοκτησίας της αδιαφάνειας ή της μορφής χρώματος 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. Διαφανές υπόβαθρο και αδιαφανές κείμενο
Η ιδιότητα CSS RGBA σας επιτρέπει να ορίσετε ένα χρώμα φόντου με ένα κανάλι άλφα (δηλ., Μπλοκ υπερφόρτωσης με ημιδιαφανές χρώμα).
Φυσικά, στο CSS υπάρχει ιδιοκτησία αδιαφάνειας, αλλά το κύριο μειονέκτημα του: όλα τα στοιχεία των παιδιών μέσα στο διαφανές μπλοκ θα κληρονομήσουν επίσης τη διαφάνεια της.
Τις περισσότερες φορές, χρησιμοποιείται η γέμισμα του ιστορικού ενός στοιχείου ενός pixel png24 και ένα fiscace διαφάνειας στο IE6, ή το φόντο γίνεται διαφανές μέσω της αδιαφάνειας του CSS. Το κείμενο τοποθετείται ξεχωριστά σε ένα άλλο στοιχείο, αλλά αυτό, κατά τη γνώμη μου, δεν είναι αρκετά άνετα ...
Μέσω Rgba Η λύση μοιάζει με αυτό:
1. Ας υποθέσουμε ότι χρειαζόμαστε ένα μπλε φόντο με διαφάνεια 50%.
Και δεν υποστηρίζει ότι θα είναι IE6-8, Opera 9.x, Mozilla Firefox. 2.x.
2. Για το IE, μπορείτε να δοκιμάσετε και να κάνετε πιο κομψά:
| .ELEMENT (Ιστορικό: Διαφανές, Φίλτρο: Πρόγραμμα: DXimagetransForm .Microsoft .Gradient (startcolorstr \u003d # 990000FF, endcolorstr \u003d # 990000FF); ZOOM: 1;) |
Σημείωση: Το χρώμα στο φίλτρο έχει οριστεί σε 8 αριθμούς. Οι πρώτοι 2 αριθμοί είναι ο βαθμός διαφάνειας: Το FF είναι εντελώς αδιαφανές, το 00 είναι διαφανές. Οι ακόλουθοι 6 αριθμοί είναι ο συνηθισμένος σχεδιασμός HTML.
Η χρήση της RGBA δεν περιορίζεται σε χρώμα φόντου από μπλοκ ...
Το CSS έχει τρεις τρόπους για να αλλάξει τη διαφάνεια του στοιχείου:
Χρησιμοποιώντας την ιδιοκτησία της αδιαφάνειας,
Χρησιμοποιώντας τη λειτουργία RGBA (),
Χρησιμοποιώντας τη λειτουργία HSLA ().
1. Ατομική ιδιοκτησία
Η ιδιοκτησία της αδιαφάνειας σάς επιτρέπει να κάνετε οποιοδήποτε στοιχείο της ιστοσελίδας μερικώς ή πλήρως διαφανές. Αυτή η ιδιότητα αλλάζει τη διαφάνεια των στοιχείων για τα οποία έχει οριστεί η εικόνα φόντου (εικόνα) ή ένα φόντο με ένα χρώμα ή κλίση. Εάν το στοιχείο για το οποίο εφαρμόζεται η ιδιότητα της αδιαφάνειας, περιέχει άλλα στοιχεία μέσα στον εαυτό της, θα αλλάξουν επίσης τη διαφάνεια τους.
Η ιδιοκτησία της αδιαφάνειας λαμβάνει τιμές στην περιοχή από 0 (εντελώς διαφανή) έως 1 (αδιαφανή), για παράδειγμα:
H1 (Χρώμα: # CD6829;) DIV (Ιστορικό: # CDD6DB, αδιαφάνεια: .3;) 
Σύκο. 1. Διαφάνεια των στοιχείων που χρησιμοποιούν αδιαφάνεια
2. Λειτουργία RGBA ()
Το έγχρωμο μοντέλο RGBA δημιουργεί μια χρωματική σκιά με ανάμειξη στις απαιτούμενες αναλογίες Κόκκινο (κόκκινο), Πράσινο (πράσινο) και Μπλε (μπλε) Λουλούδια, Α. alpha Channel (Alpha) Υπεύθυνος για το βαθμό διαφάνειας του χρώματος. Σε αντίθεση με την ιδιότητα της αδιαφάνειας, για ένα μπλοκ που περιέχει άλλα στοιχεία, η λειτουργία RGBA () θα αλλάξει μόνο τη διαφάνεια του μπλοκ.
Σύκο. 2. Χρώμα μοντέλο RGB H1 (Χρώμα: # CD6829;) DIV (Ιστορικό: RGBA (205, 214, 219, 0,3);) 
Σύκο. 3. Διαφάνεια των στοιχείων χρησιμοποιώντας τη λειτουργία RGBA () 3. Λειτουργία HSLA ()
Λειτουργία HSLA (), των οποίων οι παράμετροι σημαίνουν Τόνος (απόχρωση), Κορεσμός, Ελαφρότητα (ελαφρότητα) και alpha Channel (Alpha)Σας επιτρέπει επίσης να καθορίσετε το διαφανές χρώμα.
Οι χρωματικές αποχρώσεις ρυθμίζονται ως ποσοστό χρησιμοποιώντας την κατάλληλη τιμή από τον κύκλο χρώματος. Το ίδιο το εύρος χωρίζεται σε τομείς, στα όρια των οποίων είναι τα κύρια χρώματα:
0/360 ° - Κόκκινο
60 ° - κίτρινο
120 ° - Πράσινο
180 ° - μπλε χρώμα
240 ° - μπλε χρώμα
270 ° - Μωβ χρώμα
300 ° - Ματζέντα χρώμα.
Για να πάρετε μαύρο, πρέπει να αναθέσετε δείκτες τόνου, κορεσμού και φωτεινότητας μηδενική τιμή - HSLA (0, 0%, 0%, 1). Λευκό χρώμα λαμβάνεται με τιμή φωτεινότητας 100% HSLA (0, 0%, 100%, 1) και γκρι χρώμα - σε μηδενική τιμή του κορεσμού του HSLA (0, 0%, 50%, 1).