Ιδιότητα αδιαφάνειας CSS: ελέγχει τη διαφάνεια. Πώς να ορίσετε τη διαφάνεια στο css - transparent block
Το ημιδιαφανές αποτέλεσμα ενός στοιχείου είναι σαφώς ορατό στην εικόνα φόντου και έχει γίνει ευρέως διαδεδομένο σε διάφορα λειτουργικά συστήματαγιατί φαίνεται κομψό και όμορφο. Το κύριο πράγμα δεν είναι να έχετε ένα μονόχρωμο σχέδιο κάτω από τα ημιδιαφανή μπλοκ, αλλά μια εικόνα είναι σε αυτήν την περίπτωση που η διαφάνεια γίνεται αισθητή.
Αυτό το αποτέλεσμα επιτυγχάνεται διαφορετικοί τρόποι, συμπεριλαμβανομένων παλιών τεχνικών όπως η χρήση μιας εικόνας PNG ως φόντο, η δημιουργία μιας καρώ εικόνας και η ιδιότητα αδιαφάνειας. Αλλά μόλις προκύψει η ανάγκη να φτιάξετε ένα ημιδιαφανές φόντο σε ένα μπλοκ, αυτές οι μέθοδοι έχουν δυσάρεστα μειονεκτήματα.
Ας δούμε την ημιδιαφάνεια του κειμένου και του φόντου - πώς να το χρησιμοποιήσετε σωστά στη σχεδίαση ιστότοπου:
Το κύριο χαρακτηριστικό αυτής της ιδιότητας είναι ότι η τιμή διαφάνειας επηρεάζει όλα τα θυγατρικά στοιχεία μέσα σε αυτήν, όχι μόνο το φόντο. Αυτό σημαίνει ότι τόσο το φόντο όσο και το κείμενο θα γίνουν ημιδιαφανή. Μπορείτε να αυξήσετε το επίπεδο διαφάνειας αλλάζοντας την εντολή αδιαφάνειας από 0,1 σε 1.
HTML 5 CSS 3 IE 9 σώμα αδιαφάνειας ( φόντο: url(images/cat.jpg); ) div ( αδιαφάνεια: 0,6; φόντο: #fc0; /* Χρώμα φόντου */ padding: 5 px; /* Περιθώρια γύρω από το κείμενο */ ) Δημιουργία και προώθηση ιστοσελίδων στο Διαδίκτυο
Στη σχεδίαση ιστοσελίδων χρησιμοποιείται επίσης μερική διαφάνεια και επιτυγχάνεται μέσω της χρωματικής μορφής RGBA, η οποία ορίζεται μόνο για το φόντο του στοιχείου.
Συνήθως σε ένα σχέδιο, μόνο το φόντο ενός στοιχείου πρέπει να είναι ημιδιαφανές και το κείμενο πρέπει να είναι αδιαφανές για να διατηρείται η αναγνωσιμότητα. Η ιδιότητα αδιαφάνειας δεν είναι κατάλληλη εδώ επειδή το κείμενο μέσα στο στοιχείο θα είναι επίσης μερικώς διαφανές. Είναι καλύτερο να χρησιμοποιήσετε τη μορφή RGBA, η οποία έχει ένα κανάλι άλφα, ή με άλλα λόγια, μια τιμή διαφάνειας ως μέρος του. Η τιμή γράφεται rgba και, στη συνέχεια, οι τιμές των στοιχείων κόκκινου, μπλε και πράσινου χρώματος παρατίθενται σε παρενθέσεις, χωρισμένες με κόμματα. Το τελευταίο είναι η διαφάνεια, η οποία ορίζεται από 0 σε 1, με 0 να σημαίνει πλήρη διαφάνεια και 1 αδιαφάνεια χρώματος - η σύνταξη για τη χρήση του rgba.
Ημιδιαφανές φόντο HTML 5 CSS 3 IE 9 rgba σώμα ( φόντο: url(images/cat.jpg); ) div ( φόντο: rgba(0, 170, 238, 0.4); /* Χρώμα φόντου */ χρώμα: #fff ; / * Χρώμα κειμένου */ padding: 5px /* Περιθώρια γύρω από το κείμενο */ ) Δημιουργία και προώθηση ιστοσελίδων στο Διαδίκτυο. Η αδιαφάνεια του φόντου έχει οριστεί στο 90% - ημιδιαφανές φόντο και αδιαφανές κείμενο.
Βλαντ Μέρζεβιτς
Η μερική διαφάνεια, όταν χρησιμοποιείται σωστά, φαίνεται πολύ εντυπωσιακή στο σχεδιασμό της ιστοσελίδας. Το κύριο πράγμα είναι ότι κάτω από τα ημιδιαφανή μπλοκ δεν υπάρχει μονόχρωμη σχεδίαση, αλλά μια εικόνα είναι σε αυτή την περίπτωση που η διαφάνεια γίνεται αισθητή. Αυτό το εφέ επιτυγχάνεται με πολλούς τρόπους, και αν θυμάστε όλα, συμπεριλαμβανομένων των παλιομοδίτικών μεθόδων, χρησιμοποιεί μια εικόνα PNG ως φόντο, δημιουργώντας μια καρό εικόνα και την ιδιότητα αδιαφάνειας. Αλλά μόλις προκύψει η ανάγκη να φτιάξετε ένα ημιδιαφανές φόντο σε ένα μπλοκ, αυτές οι μέθοδοι έχουν ένα δυσάρεστο μειονέκτημα. Θα το κάνω σύντομη κριτικήγια να ξεκαθαρίσουμε τι εννοούμε μιλάμε για, καθώς και για εκείνους τους αναγνώστες που δεν είναι εξοικειωμένοι με τις μη παραδοσιακές επιλογές για τη δημιουργία ενός ημιδιαφανούς εφέ.
PNG ως φόντοΣΕ γραφικός επεξεργαστήςΈνα μονοχρωματικό ημιδιαφανές μοτίβο προετοιμάζεται εκ των προτέρων και αποθηκεύεται σε μορφή PNG-24 (Εικ. 1). Ένα ιδιαίτερο χαρακτηριστικό αυτής της μορφής είναι ότι υποστηρίζει 256 επίπεδα διαφάνειας, ή με απλά λόγια, μπορεί να εμφανίζει ημιδιαφανείς εικόνες.
Ρύζι. 1. Εικόνα για να δημιουργήσετε το φόντο
Στη συνέχεια προσθέτουμε την εικόνα ως φόντο μέσω της ιδιότητας φόντου, όπως φαίνεται στο παράδειγμα 1.
Παράδειγμα 1: Χρήση ημιδιαφανούς σχεδίου
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Διαφάνεια στο επίπεδο BODY ( φόντο: url(images/star.png); /* Εικόνα φόντου */ ) .semiopacity ( padding: 5px; /* Περιθώρια γύρω από το κείμενο */ background: url(images/opacity.png); /* Ημιδιαφανές φόντο */ )
Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 3.
Ρύζι. 2. Εφαρμογή ταπετσαρίας
Ξεπερασμένο πρόγραμμα περιήγησης Internet ExplorerΤο 6 δεν λειτουργεί με ημιδιαφάνεια στο PNG-24, εάν για κάποιο λόγο χρειαστεί να υποστηρίξετε αυτό το πρόγραμμα περιήγησης, θα πρέπει να χρησιμοποιήσετε σενάρια για αυτό.
Η παραπάνω μέθοδος έχει ορισμένους περιορισμούς. Έτσι, όταν απενεργοποιείτε τις εικόνες στο πρόγραμμα περιήγησης, το φόντο θα εξαφανιστεί εντελώς. Επιπλέον, δεν είναι τόσο εύκολο να αλλάξετε το χρώμα του φόντου και την τιμή της διαφάνειας για να το κάνετε αυτό, θα πρέπει να επεξεργαστείτε ξανά την εικόνα.
Καρό εικόναΑυτή η μέθοδος αναφέρεται σε εντελώς αρχαίες μεθόδους εφαρμογής ημιδιαφάνειας, όταν τα προγράμματα περιήγησης "δεν μπορούσαν να κάνουν τίποτα" και ήταν απαραίτητο να αναζητηθούν μη τυπικές λύσεις. Το κόλπο είναι να δημιουργήσετε μια εικόνα που εναλλάσσεται μεταξύ διαφανών και αδιαφανών pixel (Εικόνα 3). Αυτή η κανονική δομή δημιουργεί ένα ημιδιαφανές αποτέλεσμα, ουσιαστικά το μιμείται.
Ρύζι. 3. Μεγεθυσμένο καρό σχέδιο
Έτσι φαίνεται στο τέλος (Εικ. 4).
Ρύζι. 4. Προσομοίωση ημιδιαφάνειας
Τα μειονεκτήματα αυτής της μεθόδου είναι συγκρίσιμα με την προηγούμενη.
Ιδιότητα αδιαφάνειαςΗ ιδιότητα αδιαφάνειας CSS 3 καθορίζει την τιμή αδιαφάνειας και κυμαίνεται από 0 έως 1, όπου το μηδέν είναι η πλήρης διαφάνεια του στοιχείου και το ένα, αντίθετα, είναι αδιαφανές. Η ιδιότητα αδιαφάνειας έχει ένα ιδιαίτερο χαρακτηριστικό - η διαφάνεια ισχύει για όλα τα θυγατρικά στοιχεία και δεν μπορούν να υπερβούν την τιμή αδιαφάνειας του γονέα τους. Αποδεικνύεται ότι το αδιαφανές κείμενο επάνω ημιδιαφανές φόντοδεν μπορεί να είναι (παράδειγμα 2).
Παράδειγμα 2: Χρήση αδιαφάνειας
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Διαφάνεια στο επίπεδο BODY ( φόντο: url(images/star.png); /* Εικόνα φόντου */ ) .semiopacity ( φόντο: #0078c9; /* Χρώμα φόντου */ padding: 5 px; /* Περιθώρια γύρω από το κείμενο */ αδιαφάνεια : 0,7; /* Ημιδιαφανές φόντο */ φίλτρο: άλφα(Αδιαφάνεια=70) , παρακολουθεί τον διαστημικό μετεωρίτη, Η μέρα αυτή έπεσε στις είκοσι έξι του μήνα Κάρνεια, που οι Αθηναίοι ονομάζουν Μεταγίτνιον.
Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 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
Ημιδιαφανές σώμα φόντου ( φόντο: url(images/star.png); /* Φόντο ιστοσελίδας */ ) .transparent ( χρώμα φόντου: rgba(0, 120, 201, 0.7); /* Χρώμα φόντου και τιμή διαφάνειας * / padding: 10 px; /* Περιθώρια γύρω από το κείμενο */ χρώμα: #fff /* Χρώμα κειμένου */ .transparent (χρώμα φόντου: #0078c9; φίλτρο: alpha(Opacity=70); /* Διαφάνεια σε IE */; ) Μια γιγαντιαία αστρική σπείρα με διάμετρο 50 kpc, που καθιερώθηκε από τη φύση του φάσματος, απεικονίζει τέλεια τη βροχή των μετεωριτών, ωστόσο, ο Don Yemans συμπεριέλαβε μόνο 82 Μεγάλους Κομήτες στη λίστα.
Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 6.
Ρύζι. 6. Ημιδιαφανές φόντο με αδιαφανές κείμενο
Συγκρίνετε την εικόνα με την προηγούμενη, τα γράμματα έχουν γίνει πιο φωτεινά και καθαρά.
Ανακαλύφθηκε ένα σφάλμα στον Internet Explorer 7 κατά τον συνδυασμό χρώματος φόντου με διαφορετικές έννοιες. Για παράδειγμα, εάν ορίσετε το χρώμα φόντου σε κόκκινο, όπως φαίνεται παρακάτω, το φόντο στον IE7 δεν θα εμφανίζεται καθόλου.
Div (χρώμα φόντου: κόκκινο, /* Δεν ισχύει σε IE7 */ χρώμα φόντου: rgba(255, 0, 0, 0,5); )
Αυτό επιλύεται αντικαθιστώντας την ιδιότητα χρώματος φόντου με φόντο .
Div ( φόντο: κόκκινο; /* Και αυτό λειτουργεί */ φόντο: rgba(255, 0, 0, 0.5); ) Ωστόσο, υπάρχει μια προειδοποίηση. Το πρόγραμμα επικύρωσης CSS παραπονιέται για το φόντο όταν του δίνεται μια τιμή σε μορφή RGBA. Αλλά ταυτόχρονα σωστά αναφέρεται στο χρώμα φόντου . Γενικά, όπως πάντα, πρέπει να επιλέξετε ανάμεσα σε προγράμματα περιήγησης και εγκυρότητα.
Η διαφάνεια στο CSS είναι μια αρκετά μοντέρνα τεχνική Πρόσφατα, το οποίο προκαλεί δυσκολίες στην υλοποίηση μεταξύ προγραμμάτων περιήγησης. Ακόμα δεν υπάρχει καθολική μέθοδος, το οποίο θα επέτρεπε τη διαφάνεια για όλα τα προγράμματα περιήγησης. Ωστόσο, πρόσφατα η κατάσταση έχει βελτιωθεί αισθητά.
Αυτό το άρθρο παρέχει μια λεπτομερή ματιά στις υπάρχουσες προσεγγίσεις, καθώς και παραδείγματα κώδικα και επεξηγήσεις που θα σας βοηθήσουν να επιτύχετε το ίδιο αποτέλεσμα σε όλα τα προγράμματα περιήγησης με ελάχιστη προσπάθεια.
Ένα πράγμα που αξίζει να αναφέρουμε είναι ότι ενώ η διαφάνεια υπάρχει εδώ και αρκετά χρόνια, δεν ήταν ποτέ μέρος του προτύπου CSS. Αυτή είναι μια μη τυπική ιδιότητα που πρέπει να αποτελεί μέρος της προδιαγραφής CSS3.
Παλιά προσέγγισηΣτα παλιά Εκδόσεις Firefoxκαι το Safari πρέπει να εφαρμόσει την ιδιότητα ως εξής:
#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )
Η ιδιότητα -khtml-opacity χρησιμοποιήθηκε σε παλαιότερες εκδόσεις προγραμμάτων περιήγησης webkit. Αυτή η ιδιότητα έχει καταργηθεί και δεν είναι πλέον απαραίτητη, εκτός εάν είστε βέβαιοι ότι ένα σημαντικό μέρος της επισκεψιμότητας του ιστότοπού σας προέρχεται από επισκέπτες που χρησιμοποιούν το Safari 1.x, κάτι που είναι φυσικά απίθανο.
ΣΕ επόμενη γραμμήχρησιμοποιεί την ιδιότητα -moz-opacity, η οποία λειτούργησε πολύ καλά προηγούμενες εκδόσειςΚινητήρας Mozilla. Ο Firefox σταμάτησε να το υποστηρίζει στην έκδοση 0.9.
Διαφάνεια CSSσε Firefox, Safari, Chrome και OperaΓια τα περισσότερα σύγχρονα προγράμματα περιήγησης, αρκεί να χρησιμοποιήσετε την ακόλουθη ιδιότητα:
#myElement ( αδιαφάνεια: .7; )
Στο παραπάνω παράδειγμα, το στοιχείο έχει οριστεί σε 70% αδιαφάνεια (30% διαφάνεια). Δηλαδή, αν ορίσουμε την τιμή σε ένα, το στοιχείο θα είναι αδιαφανές και, κατά συνέπεια, η μηδενική ρύθμιση αυτής της τιμής θα το κάνει αόρατο.
Η ιδιότητα αδιαφάνειας χειρίζεται 2 δεκαδικά ψηφία. Δηλαδή, η τιμή ".01" θα διαφέρει από την τιμή ".02", αν και αυτό δεν γίνεται αντιληπτό.
Διαφάνεια CSS για τον Internet ExplorerΩς συνήθως, ο Internet Explorer δεν είναι φιλικός με άλλα προγράμματα περιήγησης. Επιπλέον, έχουμε τώρα τρεις εκδόσεις αυτού του προγράμματος περιήγησης σε αρκετά διαδεδομένη χρήση, η ρύθμιση διαφάνειας σε καθεμία από τις οποίες είναι διαφορετική και μερικές φορές απαιτεί πρόσθετη προσπάθεια για να επιτευχθεί ένα θετικό αποτέλεσμα.
#myElement (φίλτρο: άλφα(αδιαφάνεια=40); )
Αυτό το παράδειγμα χρησιμοποιεί την ιδιότητα φίλτρου, η οποία λειτουργεί στις εκδόσεις 6-8, ωστόσο για τις εκδόσεις 6 και 7 υπάρχει ένας περιορισμός: η ιδιότητα hasLayout του στοιχείου πρέπει να οριστεί σε true . Αυτή η ιδιότητα υπάρχει μόνο στο IE και μπορείτε να διαβάσετε περισσότερα σχετικά, για παράδειγμα, στο Habré.
Ένας άλλος τρόπος για να ορίσετε τη διαφάνεια χρησιμοποιώντας το CSS στο IE8 είναι να χρησιμοποιήσετε την ακόλουθη προσέγγιση (σημειώστε τα σχόλια):
#myElement ( φίλτρο: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* λειτουργεί σε IE6, IE7 και IE8 */ -ms-φίλτρο: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * μόνο για IE8 */ )
Η πρώτη γραμμή θα λειτουργεί σε όλες τις εκδόσεις που χρησιμοποιούνται αυτήν τη στιγμή, η δεύτερη - μόνο σε IE8. Σημειώστε ότι η δεύτερη γραμμή χρησιμοποιεί το πρόθεμα -ms- και η τιμή είναι σε εισαγωγικά.
Ρύθμιση και αλλαγή διαφάνειας CSS με χρησιμοποιώντας JavaScriptή jQueryΜπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα για να ορίσετε τη διαφάνεια:
Document.getElementById("myElement").style.opacity = ".4"; // για τα περισσότερα προγράμματα περιήγησης document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // για IE
Φυσικά, σε αυτήν την περίπτωση είναι πολύ πιο εύκολο να χρησιμοποιήσετε το jQuery, επιπλέον, θα λειτουργήσει σε όλα τα προγράμματα περιήγησης:
$("#myElement").css(( αδιαφάνεια: .4 )); // λειτουργεί σε όλα τα προγράμματα περιήγησης
Μπορείτε να κάνετε κίνηση σε αυτήν την ιδιότητα:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Η κίνηση ολοκληρώθηκε, αυτός ο κώδικας λειτουργεί σε όλα τα προγράμματα περιήγησης. ));
Λειτουργία RGBAΤο CSS3 σχεδιάζει να υποστηρίξει κανάλια άλφα χρησιμοποιώντας τη συνάρτηση rgba. Αυτή η δυνατότητα λειτουργεί σε Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Χρησιμοποιείται ως εξής:
#rgba ( φόντο: rgba(98, 135, 167, .4); )
Σε αυτήν την περίπτωση τελευταία παράμετροςδείχνει το επίπεδο αδιαφάνειας.
Λειτουργία HSLAΑρέσει προηγούμενη λειτουργίαΤο CSS3 σας επιτρέπει επίσης να ορίσετε ένα ημιδιαφανές χρώμα χρησιμοποιώντας τη συνάρτηση HSLA, οι παράμετροι της οποίας είναι Hue, Saturation, Lightness και Alpha.
#hsla ( φόντο: hsla(207, 38%, 47%, .4); )
Ένα σημαντικό σημείο κατά τη χρήση των συναρτήσεων rgba και hsla είναι ότι η ρύθμιση διαφάνειας δεν εφαρμόζεται σε θυγατρικά στοιχεία, ενώ η χρήση της ιδιότητας αδιαφάνειας κληρονομείται.
Ιδιοκτησία Αδιαφάνεια CSSείναι υπεύθυνος για τη διαφάνεια των στοιχείων (εικόνες, κείμενο, μπλοκ) σε html.
Σύνταξη αδιαφάνειας CSS
Όπου η τιμή μπορεί να λάβει πραγματικές τιμές στην περιοχή από 0,0 έως 1,0. Η τιμή 1,0 σημαίνει ότι δεν υπάρχει διαφάνεια (προεπιλογή).
Παράδειγμα Νο. 1. Διαφανής εικόνασε htmlΗ πρώτη εικόνα εμφανίζεται χωρίς διαφάνεια, η δεύτερη με διαφάνεια 0,5
.primer1( padding: 5px; opacity: 0..jpg">
Από προεπιλογή, το μπλοκ είναι μερικώς διαφανές. Όταν τοποθετείτε το ποντίκι πάνω από το μπλοκ, γίνεται φωτεινό. Τέτοια εφέ χρησιμοποιούνται συχνά στο σχεδιασμό ιστοσελίδων.
.primer2( padding: 5px; opacity: 0.5; ) ..jpg">
Η σελίδα μετατρέπεται στην ακόλουθη
Παράδειγμα Νο. 3. Διαφανές μπλοκ σε μια εικόνα σε htmlΠαρακάτω είναι ένα παράδειγμα ημιδιαφανούς μπλοκ που απέκρυψε μερικώς την εικόνα. Το μπλοκ σκόπιμα δεν καλύπτει πλήρως την εικόνα για να δείξει πώς φαίνεται σε ένα κενό φόντο.
.primer3( padding: 5px; αδιαφάνεια: 1; ) .block3( πλάτος: 100px; ύψος: 100px; φόντο: #1E90FF; περιθώριο: 0px 0px -60px 80px; περίγραμμα: 1pxsolid #000; αδιαφάνεια:"
Η σελίδα μετατρέπεται στην ακόλουθη
Σημείωση
Ο Internet Explorer έως την έκδοση 9.0 χρησιμοποιεί φίλτρα για την αλλαγή της διαφάνειας για αυτό το πρόγραμμα περιήγησης θα πρέπει να γράψετε φίλτρο: alpha(opacity=50), όπου η παράμετρος αδιαφάνειας μπορεί να πάρει μια τιμή από 0 έως 100.
Για πρόσβαση στην αδιαφάνεια από JavaScript, πρέπει να γράψετε την ακόλουθη κατασκευή:
object.style.opacity=”VALUE”
Διαβάστε επίσης:
. κείμενο-σκιά
. Η ιδιότητα ζουμ
. Υλικό παραγεμίσματος
. περιθώριο
. Πώς να φτιάξετε ένα πλαίσιο στοιχεία συνόρων
. Πώς να δημιουργήσετε φόντο σε έναν ιστότοπο html
. Πώς να φτιάξετε κινούμενα σχέδια σε html
. Πώς να το κάνουμε γραμμική κλίση
. Ακτινική κλίση CSS
← Μεταβείτε στον κατάλογο μαθημάτων CSS
Διαφάνεια CSS (Αδιαφάνεια έναντι RGBA)
Σε αυτό το μάθημα θα δούμε τις ακόλουθες ιδιότητες CSS - αδιαφάνεια και RGBA.
Διαφάνεια.Η ιδιότητα Αδιαφάνεια είναι υπεύθυνη μόνο για τη διαφάνεια των στοιχείων και η συνάρτηση RGBA είναι υπεύθυνη για το χρώμα και τη διαφάνεια εάν καθορίσετε μια τιμή διαφάνειας καναλιού άλφα.
Διαφάνεια CSS ΑδιαφάνειαΗ ψηφιακή τιμή για την αδιαφάνεια ορίζεται στην περιοχή από 0,0 έως 1,0, όπου το μηδέν είναι η πλήρης διαφάνεια και το ένα, αντίθετα, είναι η απόλυτη αδιαφάνεια. Για παράδειγμα, για να δείτε 50% διαφάνεια, πρέπει να ορίσετε την τιμή στο 0,5. Θα πρέπει να ληφθεί υπόψη ότι η αδιαφάνεια ισχύει για όλα τα θυγατρικά στοιχεία του γονέα. Αυτό σημαίνει ότι το κείμενο σε ημιδιαφανές φόντο θα είναι επίσης ημιδιαφανές. Και αυτό είναι ήδη πολύ σημαντικό μειονέκτημα, δεν ξεχωρίζει και το κείμενο.
Το στιγμιότυπο οθόνης δείχνει ξεκάθαρα ότι το μαύρο κείμενο έχει γίνει τόσο ημιδιαφανές όσο το μπλε φόντο.
Διαφάνεια CSS σε μορφή RGBAΗ χρωματική μορφή RGBA είναι μεγαλύτερη σύγχρονη εναλλακτικήγια την ιδιότητα αδιαφάνειας. R (κόκκινο), G (πράσινο), B (μπλε) - σημαίνει: κόκκινο, πράσινο, μπλε. Το τελευταίο γράμμα Α σημαίνει το κανάλι άλφα, το οποίο ορίζει τη διαφάνεια. Το RGBA, σε αντίθεση με το Opacity, δεν επηρεάζει τα θυγατρικά στοιχεία.
Τώρα ας δούμε το παράδειγμά μας χρησιμοποιώντας RGBA. Ας αντικαταστήσουμε αυτές τις γραμμές στα στυλ.
στην επόμενη γραμμή
Όπως μπορείτε να δείτε, η τιμή διαφάνειας 0,3 είναι η ίδια και για τις δύο μεθόδους.
Αποτέλεσμα του παραδείγματος RGBA:Το δεύτερο στιγμιότυπο οθόνης φαίνεται πολύ καλύτερο από το πρώτο.
Παίζοντας με την ημιδιαφάνεια του φόντου των μπλοκ, μπορείτε να επιτύχετε στον ιστότοπο ενδιαφέροντα εφέ. Είναι σημαντικό αυτά τα ημιδιαφανή τετράγωνα να πάνε πάνω από ένα πολύχρωμο σχέδιο, όπως μια φωτογραφία. Μόνο σε αυτή την περίπτωση το αποτέλεσμα θα είναι αισθητό. Αυτή η τεχνική έχει χρησιμοποιηθεί στο σχεδιασμό για πολύ καιρό, ακόμη και πριν από την εμφάνιση οποιουδήποτε CSS3, εφαρμόστηκε καθαρά σε προγράμματα γραφικών.
Εάν ο πελάτης απαιτεί η διάταξη να φαίνεται καλή σε παλαιότερες εκδόσεις περιηγητής διαδυκτίου Explorer και, στη συνέχεια, προσθέστε την ιδιότητα φίλτρου και μην ξεχάσετε να το σχολιάσετε, ώστε να μην επηρεαστεί η εγκυρότητα του κώδικα.
συμπέρασμαΗ μορφή RGBA υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης, με εξαίρεση τον Internet Explorer. Είναι επίσης πολύ σημαντικό ότι το RGBA είναι ευέλικτο, δρα μόνο σε ένα συγκεκριμένο δεδομένο στοιχείοχωρίς να επηρεάζει τις θυγατρικές της. Είναι σαφές ότι αυτό είναι πιο βολικό για τον σχεδιαστή διάταξης. Η επιλογή μου είναι σίγουρα υπέρ Μορφή RGBAγια να έχετε διαφάνεια στο CSS.
Για καλύτερη διατήρηση του υλικού και μεγαλύτερη σαφήνεια, σας προτείνω να παρακολουθήσετε το βίντεο μου.
Εάν έχετε οποιεσδήποτε ερωτήσεις ή θέλετε να σχολιάσετε αυτό το άρθρο, μπορείτε να αφήσετε το σχόλιό σας στο κάτω μέρος της σελίδας.
Αδιαφάνεια ή rgba | Διαφάνεια CSS στο CSS
Υπάρχουν δύο τρόποι για να ορίσετε τη διαφάνεια χρησιμοποιώντας CSS: χρησιμοποιώντας την ιδιότητα αδιαφάνειας ή την ιδιότητα rgba.
Αδιαφάνεια - Καθορίζει το επίπεδο διαφάνειας ενός στοιχείου ιστοσελίδας. Με μερική ή πλήρη διαφάνεια, το στοιχείο εμφανίζεται κατευθείαν εικόνα φόντουή άλλα στοιχεία που βρίσκονται κάτω από ένα ημιδιαφανές αντικείμενο.
Σύνταξη
Ο βαθμός διαφάνειας ορίζεται στο εύρος 0 (εντελώς διαφανές) έως 1 (εντελώς αδιαφανές).
Για παράδειγμα, χρειάζεται η εικόνα μας να είναι μισοδιάφανη
Προσθήκη στυλ
Αλλά δυστυχώς, δεν υποστηρίζουν ακόμη όλα τα προγράμματα περιήγησης το opacity. Για πλήρη συμβατότητα μεταξύ προγραμμάτων περιήγησης χρησιμοποιούμε:
Μπορεί επίσης να μην λειτουργεί σε IE εάν δεν καθορίζεται το πλάτος ή το ύψος.
Η ιδιότητα RGBA σάς επιτρέπει να ορίσετε χρώμα του φόντουμε άλφα κανάλι. Το κανάλι άλφα καθορίζει τη διαφάνεια ενός στοιχείου.
Η τιμή 0 είναι πλήρως διαφανής, το 1 είναι αδιαφανές και ενδιάμεση τιμήόπως 0,5 - ημιδιαφάνεια.
Σύνταξη
Ας πούμε ότι χρειαζόμαστε κείμενο με διαφανές φόντο.
Διαφορές μεταξύ αδιαφάνειας και rgba
Η αδιαφάνεια επηρεάζει ολόκληρο το μπλοκ, συμπεριλαμβανομένου του κειμένου. Δημιουργεί ένα νέο πλαίσιο επικάλυψης. Οι θυγατρικές ετικέτες δεν μπορούν να είναι πιο φωτεινές από το γονικό στοιχείο.
Το rgba επηρεάζει μόνο μια συγκεκριμένη ιδιότητα. Σε αυτήν την περίπτωση, σας επιτρέπει να βλέπετε μέσα από το φόντο και δεν κάνει το κείμενο διαφανές.
CSS: Διαφάνεια Διαφάνεια εικόναςΓια να δημιουργήσετε ένα διαφανές εφέ στο CSS, χρησιμοποιείται η ιδιότητα αδιαφάνειας.
Το IE8 και οι προηγούμενες εκδόσεις υποστηρίζουν μια εναλλακτική ιδιότητα - , όπου το "" μπορεί να είναι μια τιμή από έως, όσο χαμηλότερη είναι η τιμή, τόσο πιο διαφανές θα είναι το στοιχείο.
Όλα τα άλλα προγράμματα περιήγησης υποστηρίζουν στάνταρ Ιδιότητα CSS, που μπορεί να πάρει αριθμούς από έως ως τιμή, όσο μικρότερη είναι η τιμή, τόσο πιο διαφανές θα είναι το στοιχείο:
Τίτλος εγγράφου .myClass ( float: left; margin-right: 5px; opacity: 0..jpg" class="myClass"> Δοκιμάστε "
Pseudo-class:hover σας επιτρέπει να αλλάξετε εμφάνισηστοιχεία όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω τους. Θα χρησιμοποιήσουμε αυτήν τη δυνατότητα για να κάνουμε την εικόνα να χάσει τη διαφάνειά της όταν τοποθετείται το δείκτη του ποντικιού πάνω από:
Τίτλος εγγράφου img ( float: αριστερά, περιθώριο-δεξιά: 5 px; αδιαφάνεια: 0,4; φίλτρο: alpha(opacity=40); /*για IE8 και παλαιότερες εκδόσεις*/ ) img:hover ( αδιαφάνεια: 1..jpg"> Δοκιμάστε "
Υπάρχουν δύο πιθανούς τρόπουςΚάντε το στοιχείο διαφανές: η ιδιότητα που περιγράφεται παραπάνω και προσδιορίζοντας το χρώμα φόντου σε μορφή RGBA.
Μπορεί να είστε ήδη εξοικειωμένοι με το μοντέλο χρωματικής αναπαράστασης στο .
Ιδιότητα αδιαφάνειας CSS(Κόκκινο, Πράσινο, Μπλε - κόκκινο, πράσινο, μπλε) - ένα σύστημα χρωμάτων που καθορίζει την απόχρωση αναμειγνύοντας κόκκινο, πράσινο και μπλε χρώματα. Για παράδειγμα, για την εργασία κίτρινο χρώμαΓια κείμενο, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις ακόλουθες δηλώσεις:
χρώμα: rgb(255,255,0); χρώμα: rgb(100%,100%,0);
Τα χρώματα που προσδιορίζονται με θα διαφέρουν από τις δεκαεξαδικές τιμές που χρησιμοποιούσαμε προηγουμένως, καθώς επιτρέπουν τη χρήση ενός καναλιού διαφάνειας άλφα. Αυτό σημαίνει ότι μέσα από το φόντο ενός στοιχείου με άλφα διαφάνεια, αυτό που βρίσκεται κάτω από αυτό θα είναι ορατό.
Η δήλωση ενός χρώματος είναι παρόμοια στη σύνταξη με τους τυπικούς κανόνες. Ωστόσο, μεταξύ άλλων, θα χρειαστεί να δηλώσουμε την τιμή ως (αντί για) και να καθορίσουμε μια πρόσθετη δεκαδική τιμή διαφάνειας μετά την τιμή χρώματος μεταξύ (πλήρως διαφανές) και (πλήρως αδιαφανές).
χρώμα: rgba(255,255,0,0,5); χρώμα: rgba(100%,100%,0,0,5);
Η διαφορά μεταξύ της ιδιότητας και είναι ότι η ιδιότητα εφαρμόζει διαφάνεια σε ολόκληρο το στοιχείο, δηλαδή, ολόκληρο το περιεχόμενο του στοιχείου γίνεται διαφανές. Το A σάς επιτρέπει να ορίσετε τη διαφάνεια σε μεμονωμένα μέρη ενός στοιχείου (για παράδειγμα, μόνο το κείμενο ή το φόντο):
σώμα ( φόντο-εικόνα: url(img.jpg); ) .prim1 (πλάτος: 400 εικονοστοιχεία; περιθώριο: 30 εικονοστοιχεία 50 εικονοστοιχεία; χρώμα φόντου: #ffffff; περίγραμμα: 1 εικονοστοιχείο συμπαγές μαύρο; βάρος γραμματοσειράς: έντονη; αδιαφάνεια: 0.5; φίλτρο : άλφα(αδιαφάνεια=70); /*για IE8 και παλαιότερα*/ στοιχ. font-weight: bold-align: center ) Δοκιμάστε »
Σημείωση: Οι τιμές δεν υποστηρίζονται στον IE8 και παλαιότερες εκδόσεις. Για ανακοίνωση εφεδρική επιλογήΤα χρώματα για παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν τιμές χρώματος με κανάλια άλφα θα πρέπει να καθοριστούν πρώτα πριν από την τιμή: φόντο: rgb(255,255,0); φόντο: rgba(255,255,0,0.5);
Άρθρα / CSS /
Πώς να κάνετε ένα στοιχείο διαφανές και να αφαιρέσετε τη διαφάνεια CSS;1. Πώς να κάνετε ένα στοιχείο διαφανές;
2. Πώς να αφαιρέσετε τη διαφάνεια παιδί στοιχείο?
3. Παράδειγμα
Για να κάνετε ένα στοιχείο διαφανές, θα πρέπει να χρησιμοποιήσετε CSS.
Διαφάνεια CSS - αυτό που είναι σημαντικόΓια στυλ υπάρχει χρήσιμη ιδιότητααδιαφάνεια, στην οποία το μόνο που απομένει είναι να προσδιοριστεί ο βαθμός διαφάνειας. Όταν, κατά κανόνα, το 1 ή το 100 σημαίνει ότι το στοιχείο δεν είναι διαφανές και το 0,1 ή το 10 σημαίνει ότι το στοιχείο είναι διαφανές. Γιατί δύο αξίες; Επειδή για τον IE (Internet Explorer), καθώς και για άλλα προγράμματα περιήγησης, προδιαγράφονται διαφορετικές ιδιότητες και στον IE η διαφάνεια μετράται σε διαφορετικές τιμές.
Ημιδιαφανές στοιχείοΑντίστοιχα, για να κάνετε ένα στοιχείο ημιδιαφανές, πρέπει να ορίσετε την αδιαφάνεια σε 0,5 ή 50.
Κωδικός CSS
Για παράδειγμα, ορίζετε τη διαφάνεια σε όλα τα στοιχεία μενού και όταν τοποθετείτε το δείκτη του ποντικιού θέλετε απλώς να το κάνετε ΜΗ διαφανές (κατάργηση διαφάνειας), τότε του εκχωρείτε τα ακόλουθα χαρακτηριστικά, όπου η τιμή διαφάνειας είναι 1 ή 100:
Κωδικός CSS
φίλτρο:άλφα(αδιαφάνεια=100);
-moz-opacity:1;
-khtml-opacity:1;
αδιαφάνεια: 1;
Μην ξεχάσετε να καθορίσετε και τις 4 ιδιότητες, καθώς διαφορετικά η ενέργεια δεν θα είναι cross-browser, δηλαδή δεν θα λειτουργεί σε όλα τα προγράμματα περιήγησης.
Εάν θέλετε να εμφανίζεται ημιδιαφάνεια όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια εικόνα, μπορείτε να δημιουργήσετε, για παράδειγμα, μια τέτοια κλάση
Αδιαφάνεια:Hover (
φίλτρο:άλφα(αδιαφάνεια=50); /* για IE 5.5+ */
-moz-opacity:0,5; /* για Mozilla 1.6 και νεότερη έκδοση */
-khtml-opacity:0,5; /* για Konqueror 3.1, Safari 1.1 */
αδιαφάνεια: 0,5; /* για Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}
Δημιουργήστε ένα αρχείο index.html
Τίτλος σελίδας
.opacity:hover (
φίλτρο:άλφα(αδιαφάνεια=50); /* για IE 5.5+ */
-moz-opacity:0,5; /* για Mozilla 1.6 και νεότερη έκδοση */
-khtml-opacity:0,5; /* για Konqueror 3.1, Safari 1.1 */
αδιαφάνεια: 0,5; /* για Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}
Τετράγωνο (
πλάτος: 100 px;
ύψος: 100 px;
φόντο: μαύρο;
}
Ημιδιαφάνεια στοιχείου
Κάντε την εικόνα ημιδιαφανή στο hover!
DemoΛήψη πηγών
Σας ευχαριστώ για την προσοχή σας!
Επόμενο άρθρο
Πώς να δημιουργήσετε μπλοκ divμε κύλιση;
/* 06.07.2006 */
Διαφάνεια CSS (αδιαφάνεια css, αδιαφάνεια javascript)Το φαινόμενο της διαφάνειας είναι το θέμα αυτού του άρθρου. Εάν ενδιαφέρεστε να μάθετε πώς να κάνετε διαφανή στοιχεία σελίδας HTML χρησιμοποιώντας CSS ή Javascript και πώς να επιτύχετε συμβατότητα μεταξύ προγραμμάτων περιήγησης (που λειτουργεί το ίδιο σε διαφορετικά προγράμματα περιήγησης) λαμβάνοντας υπόψη Προγράμματα περιήγησης Firefox, Internet Explorer, Opera, Safari, Konqueror, τότε είστε ευπρόσδεκτοι. Επιπλέον, ας δούμε μια έτοιμη λύση για τη σταδιακή αλλαγή της διαφάνειας χρησιμοποιώντας javascript.
Αδιαφάνεια CSS (διαφάνεια CSS) Συμβίωση αδιαφάνειας CSSΜε τον όρο συμβίωση εννοώ το συνδυασμό διαφορετικών στυλ διαφορετικά προγράμματα περιήγησηςσε μια Κανόνας CSSγια να επιτευχθεί το επιθυμητό αποτέλεσμα, δηλ. για την εφαρμογή της συμβατότητας μεταξύ προγραμμάτων περιήγησης.
Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5,5+*/ -moz-opacity: 0,5; /* Mozilla 1.6 και κάτω */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
Στην πραγματικότητα, ο πρώτος και ο τελευταίος κανόνες χρειάζονται, για IE5.5+ και προγράμματα περιήγησης που κατανοούν την αδιαφάνεια του CSS3, και οι δύο κανόνες στη μέση προφανώς δεν κάνουν τη διαφορά, αλλά δεν παρεμβαίνουν στην πραγματικότητα (αποφασίστε μόνοι σας αν τα χρειάζεστε).
Συμβίωση αδιαφάνειας JavascriptΤώρα ας προσπαθήσουμε να ορίσουμε τη διαφάνεια μέσω ενός σεναρίου, λαμβάνοντας υπόψη τις δυνατότητες διαφορετικών προγραμμάτων περιήγησης που περιγράφονται παραπάνω.
Συνάρτηση setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) επιστροφή; // Εάν δεν υπάρχει στοιχείο με το καθορισμένο αναγνωριστικό ή το πρόγραμμα περιήγησης δεν υποστηρίζει καμία από τις γνωστές λειτουργίες των τρόπων ελέγχου της διαφάνειας εάν (opacityProp=="φίλτρο") // Internet Exploder 5.5+ ( nOpacity *= 100; // Εάν η διαφάνεια έχει ήδη οριστεί, τότε αλλάξτε τη μέσω της συλλογής φίλτρων , διαφορετικά προσθέστε διαφάνεια μέσω style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Για να μην αντικαταστήσετε άλλα φίλτρα, χρησιμοποιήστε το "+=" ) αλλιώς // Άλλα προγράμματα περιήγησης elem.style = nOpacity; ) συνάρτηση getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // Συμβατό με CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) επιστρέφει "αδιαφάνεια"; αλλιώς εάν (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 και παλαιότερες εκδόσεις, Firefox 0.8 επιστρέφει "MozOpacity"; αλλιώς εάν (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 επιστρέφει "KhtmlOpacity"; αλλιώς εάν (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ επιστρέφει "φίλτρο"; επιστροφή ψευδής? //χωρίς διαφάνεια)
Η συνάρτηση παίρνει δύο ορίσματα: sElemId - στοιχείο id, nOpacity - πραγματικός αριθμόςαπό 0,0 έως 1,0 ρύθμιση διαφάνειας σε αδιαφάνεια στυλ CSS3.
Νομίζω ότι αξίζει να εξηγήσουμε το τμήμα IE του κώδικα συνάρτησης setElementOpacity.
Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; εάν (oAlpha) oAlpha.αδιαφάνεια = nΑδιαφάνεια; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");
Θα μπορούσε κανείς να αναρωτηθεί γιατί να μην ορίσετε τη διαφάνεια εκχωρώντας (=) στην ιδιότητα elem.style.filter = "..."; ? Γιατί χρησιμοποιείται το "+=" για την προσθήκη της ιδιότητας φίλτρου στο τέλος της συμβολοσειράς; Η απάντηση είναι απλή, για να μην «αντικατασταθούν» άλλα φίλτρα. Αλλά ταυτόχρονα, εάν προσθέσετε ένα φίλτρο με αυτόν τον τρόπο για δεύτερη φορά, δεν θα αλλάξει το προηγούμενο ορίσετε τιμέςαυτού του φίλτρου, αλλά απλώς θα προστεθεί στο τέλος της γραμμής ιδιοτήτων, κάτι που δεν είναι σωστό. Επομένως, εάν ένα φίλτρο είναι ήδη εγκατεστημένο, τότε θα πρέπει να το χειριστείτε μέσω της συλλογής των φίλτρων που εφαρμόζονται στο στοιχείο: elem.filters (αλλά έχετε υπόψη ότι εάν το φίλτρο δεν έχει εκχωρηθεί ακόμη στο στοιχείο, τότε διαχειριστείτε το μέσω αυτή τη συλλογήαδύνατο). Τα στοιχεία της συλλογής είναι προσβάσιμα είτε με το όνομα του φίλτρου είτε με το ευρετήριο. Ωστόσο, το φίλτρο μπορεί να καθοριστεί σε δύο στυλ, το σύντομο στυλ IE4 ή το στυλ IE5.5+, το οποίο λαμβάνεται υπόψη στον κώδικα.
Αλλάξτε ομαλά τη διαφάνεια ενός στοιχείουΈτοιμη λύση. Χρησιμοποιούμε τη βιβλιοθήκη opacity.js
img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Δημιουργία κανόνα για την αλλαγή της διαφάνειας: ορίστε το όνομα του κανόνα, τη διαφάνεια έναρξης και λήξης, ως καθώς και μια προαιρετική παράμετρος καθυστερήσεις που επηρεάζουν την ταχύτητα αλλαγής διαφάνειας fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" />
fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" />
fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />
Το πώς να συνδέσετε τη βιβλιοθήκη, νομίζω, είναι σαφές από το παραπάνω παράδειγμα. Τώρα αξίζει να εξηγήσουμε τον ορισμό των κανόνων. Πριν καλέσετε μεθόδους ομαλή αλλαγήδιαφάνεια, πρέπει να ορίσετε τους κανόνες με τους οποίους θα πραγματοποιηθεί η διαδικασία: πρέπει να ορίσετε την αρχική και την τελική διαφάνεια και επίσης, εάν θέλετε, να καθορίσετε μια παράμετρο καθυστέρησης που επηρεάζει την ταχύτητα της διαδικασίας αλλαγής της διαφάνειας.
Οι κανόνες ορίζονται χρησιμοποιώντας τη μέθοδο fadeOpacity.addRule
Σύνταξη: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Επιχειρήματα:
- sRuleName - όνομα κανόνα, που ορίζεται αυθαίρετα.
- nStartOpacity και nFinishOpacity - διαφάνεια έναρξης και λήξης, αριθμοί στην περιοχή από 0,0 έως 1,0.
- nDelay - καθυστέρηση σε χιλιοστά του δευτερολέπτου (προαιρετικό όρισμα, η προεπιλογή είναι 30).
Ονομάζουμε τη διαφάνεια που ξεθωριάζει μέσω των μεθόδων fadeOpacity(sElemId, sRuleName), όπου sElemId είναι το αναγνωριστικό του στοιχείου και sRuleName είναι το όνομα του κανόνα. Για να επιστρέψετε τη διαφάνεια στο την αρχική κατάστασηΧρησιμοποιείται η μέθοδος fadeOpacity.back(sElemId).
:τοποθετήστε το δείκτη του ποντικιού για εύκολη αλλαγή της διαφάνειαςΘα σημειώσω επίσης ότι για μια απλή αλλαγή διαφάνειας (αλλά όχι μια σταδιακή αλλαγή), ο ψευδο-επιλογέας :hover είναι σωστός, ο οποίος σας επιτρέπει να ορίζετε στυλ για ένα στοιχείο όταν τοποθετείτε το ποντίκι πάνω του.
a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) 
Λάβετε υπόψη ότι η εικόνα τοποθετείται μέσα στο στοιχείο A. Το γεγονός είναι ότι ο Internet Explorer έως την έκδοση 6 κατανοεί τον ψευδο-επιλογέα:hover, μόνο σε σχέση με συνδέσμους και όχι με οποιοδήποτε στοιχείο, όπως θα έπρεπε στο CSS (η κατάσταση έχει διορθωθεί στο ΙΕ7) .
Διαφάνεια και οδοντωτό κείμενο στο IEΜΕ έκδοση των WindowsΤο XP πρόσθεσε anti-aliasing γραμματοσειρές οθόνηςτη μέθοδο ClearType και μαζί της παρενέργειεςστο IE κατά τη χρήση αυτής της μεθόδου anti-aliasing. Όσον αφορά την περίπτωσή μας, εάν εφαρμοστεί διαφάνεια σε ένα στοιχείο με κείμενο όταν είναι ενεργοποιημένη η μέθοδος κατά της παραμόρφωσης ClearType, τότε το κείμενο παύει να εμφανίζεται κανονικά (έντονο κείμενο, για παράδειγμα, διπλασιάζεται, μπορεί επίσης να εμφανιστούν διάφορα τεχνουργήματα, για παράδειγμα, σε τη μορφή των παύλων, οδοντωτό κείμενο). Για να διορθώσετε την κατάσταση, για το IE πρέπει να ορίσετε το χρώμα φόντου, την ιδιότητα CSS background-color , στο στοιχείο στο οποίο εφαρμόζεται η διαφάνεια. Ευτυχώς, το σφάλμα έχει διορθωθεί στον IE7.
