Ιδιότητα CSS 3 αδιαφάνειασας επιτρέπει να κάνετε αυτό ή εκείνο το στοιχείο του ιστότοπου διαφανές.

Ο βαθμός διαφάνειας του στοιχείου καθορίζεται από την τιμή από 0 πριν 1 όπου 0 - εντελώς διαφανές 1 - αδιαφανές καθόλου .. Για παράδειγμα, η τιμή 0.5 ιδιότητες αδιαφάνειαπου εφαρμόζεται στην εικόνα θα σημαίνει ότι αυτή η εικόνα πρέπει να είναι ημιδιαφανής.

Διαφάνεια στην ΙΕ

Πρόγραμμα περιήγησης Internet Explorerδεν υποστηρίζει ιδιότητες αδιαφάνειαμέχρι την ένατη έκδοση, ωστόσο, έχει το δικό του φίλτρο με το οποίο μπορείτε να ορίσετε τον βαθμό διαφάνειας:

φίλτρο: άλφα (αδιαφάνεια=50)

Εννοια αδιαφάνειαγια φίλτρο περιηγητής διαδυκτίουΟ Explorer μπορεί να διαφέρει από 0 - εντελώς διαφανές σε 100 - αδιαφανές

Τα μπλοκ αυτού του μενού θα είναι ημιδιαφανή και στο hover στον IE!!

Σπίτι
χάρτης τοποθεσίας
Αγοράστε έναν ελέφαντα
πουλήσει ελέφαντα
Νοικιάστε έναν ελέφαντα

Προθέματα.

Σε αυτό, καταρχήν, θα μπορούσε κανείς να ολοκληρώσει το κεφάλαιο για τη διαφάνεια, αλλά θα ήθελα να σας πω περισσότερα για το λεγόμενο προθέματα πωλητή.. αυτοί οι σύντροφοι δεν έχουν πολλή σχέση με αυτό το κεφάλαιο, ωστόσο, περαιτέρω στην πορεία εκμάθησης CSS3, θα συναντιούνται όλο και πιο συχνά και κάπου πρέπει να μιλήσω γι 'αυτούς - οπότε θα σας πω εδώ.

Έτσι, τα προθέματα προμηθευτή είναι ειδικά προθέματα για ιδιότητες CSS που χρησιμοποιούνται από προγράμματα περιήγησης για πειραματικές ιδιότητες που δεν αποτελούν επίσημα μέρος της προδιαγραφής CSS.

Θυμόμαστε ότι η προδιαγραφή CSS 3 είναι ακόμη υπό ανάπτυξη και τυπικά οι ιδιότητες που περιγράφονται σε αυτό το σεμινάριο δεν υπάρχουν στη φύση, αλλά τα προγράμματα περιήγησης τις χρησιμοποιούν ήδη ενεργά με δικό τους κίνδυνο και κίνδυνο.

Γιατί με δική σας ευθύνη; Ναι, επειδή είναι πιθανό όταν εγκριθεί επίσημα η προδιαγραφή CSS 3, οι ιδιότητες που περιγράφονται σε αυτήν να διαφέρουν ως προς τη δράση τους από τις ιδιότητες με το ίδιο όνομα που χρησιμοποιούνται ήδη από τα προγράμματα περιήγησης. Λοιπόν, ας ρίξουμε μια ματιά στους προγραμματιστές προδιαγραφών CSS 3 για να ορίσουμε μια ιδιοκτησία αδιαφάνειαόχι ως ο βαθμός διαφάνειας του μπλοκ, αλλά, για παράδειγμα, ως η σκίαση ή το τρεμόπαιγμα του (φυσικά γράφω ανοησίες), που τότε θα εμφανίζουν ήδη εκατομμύρια εγκατεστημένα προγράμματα περιήγησηςγια το οποίο αδιαφάνειααυτό είναι διαφάνεια;

Ή ας υποθέσουμε ότι οι προγραμματιστές του προγράμματος περιήγησης βρήκαν τη δική τους ιδιοκτησία - μια καινοτομία που κανείς δεν έχει πουθενά, αλλά ένα έγγραφο με τέτοια ιδιότητα δεν περνά τον έλεγχο εγκυρότητας επειδή δεν υπάρχει τέτοια ιδιότητα στις προδιαγραφές.

Για αυτούς και άλλους λόγους, τα προγράμματα περιήγησης χρησιμοποιούν προθέματα στην αρχή ιδιοτήτων που δεν αποτελούν μέρος της επίσημης προδιαγραφής. Κάθε πρόγραμμα περιήγησης έχει το δικό του πρόθεμα που ξεκινά με το σύμβολο "-", αυτό το σύμβολο στην αρχή της ιδιότητας, καθώς και αυτό το σύμβολο "_", σύμφωνα με την προδιαγραφή CSS 2.1, υποδεικνύει ότι η ιδιότητα προορίζεται για επεκτάσεις CSS ορισμένων προγράμματα περιήγησης.

Εδώ είναι τα πιο δημοφιλή προγράμματα περιήγησης και τα προθέματά τους:

Πρόγραμμα περιήγησης	Πρόθεμα
ΛΥΡΙΚΗ ΣΚΗΝΗ	-ο-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 και νεότερη έκδοση	-Κυρία-
Safari έως την έκδοση 3, Konqueror	-khtml-
Safari 3 και νεότερη έκδοση, Google Chrome	-webkit-

Η χρήση προθεμάτων είναι πολύ εύκολη, απλώς πάρτε κάποια ιδιότητα CSS και αντικαταστήστε το επιθυμητό πρόθεμα σε αυτήν, για παράδειγμα, στην ιδιότητα αδιαφάνειαυποκατάστατο -moz-αποδεικνύεται: -moz-αδιαφάνεια

Αν και στην πραγματικότητα η έκφρασή μου " χρησιμοποιήστε προθέματα» λάθος! στην πραγματικότητα, τίποτα δεν υποκαθίσταται πουθενά, υπάρχει απλώς ένα ακίνητο αδιαφάνεια, είναι εκεί -moz-αδιαφάνειακαι αυτές είναι δύο διαφορετικές ιδιότητες που δεν χρειάζεται να εκτελούν την ίδια λειτουργία!! - πρέπει να γίνει κατανοητό.

Και πρέπει επίσης να γίνει κατανοητό ότι ορισμένα συγκεκριμένα προγράμματα περιήγησης έως ορισμένες εκδόσεις μπορούν να υποστηρίξουν ιδιότητες CSS μόνο με τα δικά τους προθέματα (και πάλι, δεν εκφράζομαι σωστά, είναι σωστό να πω ότι οι δικές μου ιδιότητες είναι επεκτάσεις CSS προγράμματος περιήγησης) ή μπορούν βασίζονται αρχικά σε ακόμη και ανεπτυγμένες προδιαγραφές. – Θα εξετάσουμε κάθε συγκεκριμένη περίπτωση σε αυτό το εγχειρίδιο ξεχωριστά.

Όσον αφορά αυτό το κεφάλαιο για τη διαφάνεια, πρέπει να σημειωθεί ότι Πρόγραμμα περιήγησης Firefox 3,5 και νωρίτερα χρησιμοποιούν τη δική τους ιδιοκτησία -moz-αδιαφάνεια, και το πρόγραμμα περιήγησης Safari πριν από την έκδοση 1.1 χρησιμοποιεί την ιδιότητά του -khtml-αδιαφάνεια .

Έτσι, για να κάνουμε το παράδειγμά μας εντελώς cross-browser, πρέπει να προσθέσουμε μερικές ακόμη γραμμές στον κώδικα:

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

Τώρα για μερικές χρήσιμες συμβουλές..

Να χρησιμοποιείτε πάντα προθέματα (καλά, εκτός εάν φυσικά το ένα ή το άλλο πρόγραμμα περιήγησης δεν μπορεί να τα κάνει χωρίς αυτά) σε περιπτώσεις όπου η ιδιότητα που χρησιμοποιείται μπορεί να επηρεάσει σημαντικά την απόδοση, την αναγνωσιμότητα και τη χρηστικότητα του ιστότοπου. Είναι ένα πράγμα όταν οποιαδήποτε μικροπράγματα στη σχεδίαση του ιστότοπου δεν λειτουργούν και είναι εντελώς άλλο όταν, για παράδειγμα, το μενού του ιστότοπου δεν λειτουργεί ή είναι αδύνατο να διαβάσετε το κείμενο στον ιστότοπο λόγω του γεγονότος ότι το πρόγραμμα περιήγησης λειτουργεί δεν υποστηρίζει κάποια ιδιότητα, αλλά χρησιμοποιεί μια παρόμοια δική της.

Στο CSS, υπάρχουν τρεις τρόποι για να αλλάξετε τη διαφάνεια ενός στοιχείου:
χρησιμοποιώντας την ιδιότητα αδιαφάνειας,
χρησιμοποιώντας τη συνάρτηση rgba(),
χρησιμοποιώντας τη συνάρτηση hsla().

1. Η ιδιότητα αδιαφάνειας

Η ιδιότητα αδιαφάνεια σάς επιτρέπει να κάνετε οποιοδήποτε στοιχείο μιας ιστοσελίδας μερικώς ή πλήρως διαφανές. Αυτή η ιδιότητα αλλάζει τη διαφάνεια των στοιχείων που έχουν οριστεί σε εικόνα φόντου(εικόνα) ή ορίστε το φόντο με χρώμα ή ντεγκραντέ. Εάν το στοιχείο στο οποίο εφαρμόζεται η ιδιότητα αδιαφάνειας έχει άλλα στοιχεία μέσα του, θα αλλάξουν επίσης την αδιαφάνεια.
Η ιδιότητα αδιαφάνειας παίρνει τιμές μεταξύ 0 (πλήρως διαφανές) και 1 (αδιαφανές), για παράδειγμα:

H1 (χρώμα: #CD6829;) div ( φόντο: #CDD6DB; αδιαφάνεια: .3; )
Ρύζι. 1. Διαφάνεια στοιχείων με χρήση αδιαφάνειας

2. Λειτουργία RGB().

Το χρωματικό μοντέλο RGBA δημιουργεί μια χρωματική απόχρωση αναμειγνύοντας τις απαιτούμενες αναλογίες. το κόκκινο, πράσινοςκαι μπλελουλούδια, και κανάλι άλφα (Alpha)ευθύνεται για τον βαθμό διαφάνειας του χρώματος. Σε αντίθεση με την ιδιότητα αδιαφάνεια, για ένα πλαίσιο που περιέχει άλλα στοιχεία, η συνάρτηση rgba() θα αλλάξει μόνο την αδιαφάνεια του πλαισίου.

Ρύζι. 2. Χρωματικό μοντέλο RGB h1 (χρώμα: #CD6829;) div (φόντο: rgba(205, 214, 219, 0.3);)
Ρύζι. 3. Διαφάνεια στοιχείων με χρήση της συνάρτησης rgba().

3. συνάρτηση hsl().

Η συνάρτηση hsla() της οποίας οι παράμετροι σημαίνουν τόνος (απόχρωση), Κορεσμός, λάμψηκαι κανάλι άλφα (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) .

Το CSS3 ορίζει την ιδιότητα αδιαφάνειας για την εφαρμογή διαφανούς εφέ σε στοιχεία σελίδας. Η τιμή αυτής της ιδιότητας είναι ένας αριθμός μεταξύ 0,0 και 1,0. Η τιμή μηδέν καθιστά το στοιχείο εντελώς διαφανές, ενώ η τιμή ενός το καθιστά εντελώς αδιαφανές. Η ιδιότητα μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο σελίδας.

Img1 ( αδιαφάνεια: 0,2; ) .img2 ( αδιαφάνεια: 0,5; ) .img3 ( αδιαφάνεια: 1,0; )

Για να ορίσετε τη διαφάνεια μέσω σεναρίου χρησιμοποιήστε: object.style.opacity

Το παλιό Mozilla και ο Firefox 0.8 χρησιμοποιούν το δικό τους όνομα για αυτήν την ιδιότητα: -moz-opacity Για να ορίσετε τη διαφάνεια μέσω σεναρίου, χρησιμοποιήστε: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 - ενσωματωμένο στη μηχανή KHTML, χρησιμοποιήστε την ιδιότητα για τον έλεγχο της διαφάνειας: -khtml-opacity Για να ορίσετε τη διαφάνεια μέσω σεναρίου, χρησιμοποιήστε: object.style.KhtmlOpacity

Το Safari χρησιμοποιεί αδιαφάνεια CSS3 από την έκδοση 1.2, αλλά ο Konqueror παλαιότερος από την έκδοση 3.1, έχοντας σταματήσει να υποστηρίζει το -khtml-opacity, δεν εισήγαγε υποστήριξη για αδιαφάνεια CSS3.

Internet Explorer από την έκδοση 5.5 και μέχρι την πιο πρόσφατη σήμερα Έκδοση ΔιαδικτύουΟ Explorer 7 υλοποιεί τη διαφάνεια μέσω του φίλτρου Alpha DirectX. Αξίζει να σημειωθεί ότι αυτό το φίλτρο χρησιμοποιεί μια τιμή διαφάνειας στην περιοχή από 0 έως 100 (και όχι από 0,0 έως 1,0). Σημειώνω επίσης ότι το φίλτρο μπορεί να εφαρμοστεί μόνο σε ένα στοιχείο με την ιδιότητα ύψος, πλάτος ή θέση να έχει οριστεί σε απόλυτο ή το writeMode να έχει οριστεί σε tb-rl ή το contentEditable να έχει οριστεί σε true.

Παράδειγμα (ορίστε την αδιαφάνεια στο μισό):

Img1 ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* Σύνταξη IE5.5+ (προτιμάται) */ .img2 (φίλτρο: alpha(opacity=50); ) /* Σύνταξη IE4 */ Προς ορίστε τη διαφάνεια μέσω σεναρίου, χρησιμοποιήστε: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(συμβολοσειρά παραμέτρων)"

Για να λάβετε διαφάνεια παρόμοια με τη διαφάνεια του W3C, χρησιμοποιήστε το "opacity=number from 0 to 100" ως συμβολοσειρά παραμέτρων.

Πώς να το κάνετε να λειτουργεί σε όλα τα προγράμματα περιήγησης:

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 */ αδιαφάνεια: 0.5; /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

javascript

συνάρτηση setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); εάν (!elem || !opacityProp) επιστρέψει; // Εάν δεν υπάρχει στοιχείο με το καθορισμένο αναγνωριστικό ή το πρόγραμμα περιήγησης δεν υποστηρίζει καμία από τις μεθόδους που είναι γνωστές στη συνάρτηση για τον έλεγχο της διαφάνειας εάν (opacityProp=="φίλτρο") // Internet Exploder 5.5+ ( nOpacity *= 100; // Εάν η διαφάνεια έχει ήδη οριστεί, αλλάξτε την μέσω των φίλτρων συλλογή, διαφορετικά προσθέστε διαφάνεια μέσω style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "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) επιστρέψει "αδιαφάνεια", αλλιώς if (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+ επιστρέφει "φίλτρο"; επιστροφή ψευδής? // χωρίς διαφάνεια)

Μια εργασία

Κάντε ένα στοιχείο μπλοκ με όλο το περιεχόμενό του ημιδιαφανές.

Λύση

Για να αλλάξετε τον βαθμό διαφάνειας ενός στοιχείου, χρησιμοποιείται η ιδιότητα στυλ αδιαφάνεια με τιμή από 0 έως 1, όπου το 0 αντιστοιχεί στην πλήρη διαφάνεια και το 1, αντίθετα, στην αδιαφάνεια του αντικειμένου. Στον Internet Explorer, αυτή η ιδιότητα δεν λειτουργεί, επομένως πρέπει να χρησιμοποιήσετε το φίλτρο ειδικά για αυτήν, μια ιδιότητα που δεν αποτελεί μέρος της προδιαγραφής CSS. Το Παράδειγμα 1 δείχνει πώς να ορίσετε τη διαφάνεια ενός επιπέδου για όλα τα προγράμματα περιήγησης.

Παράδειγμα 1. Ημιδιαφανές στρώμα

HTML5 CSS 2.1 IE Cr Op Sa Fx

Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο σχ. ένας.

Ρύζι. 1. Ημιδιαφανές επίπεδο στο πρόγραμμα περιήγησης Safari

Η ιδιότητα φίλτρου προσθέτει διαφάνεια μόνο σε εκείνα τα στοιχεία όπου έχει οριστεί τουλάχιστον ένα από τα μεγέθη (πλάτος ή ύψος ) ή το στοιχείο έχει οριστεί σε απόλυτη τοποθέτηση(θέση : απόλυτη ).

Λάβετε επίσης υπόψη ότι η διαφάνεια επηρεάζει όλα τα περιεχόμενα του επιπέδου, συμπεριλαμβανομένων των θυγατρικών στοιχείων, και δεν θα μπορείτε να αυξήσετε το επίπεδο αδιαφάνειας για αυτά μεταβάλλοντας την αδιαφάνεια. Στο παράδειγμα 1, όπου η διαφάνεια του επιπέδου έχει οριστεί στο 0,7, το κείμενο μέσα στο επίπεδο λαμβάνει την ίδια τιμή. Επιτρέπεται να το ορίσετε λιγότερο, αλλά το κείμενο δεν μπορεί να υπερβαίνει την τιμή διαφάνειας 0,7.

Η ιδιότητα αδιαφάνειας CSS είναι υπεύθυνη για τη διαφάνεια των στοιχείων (εικόνες, κείμενο, μπλοκ) στο html.

Σύνταξη CSS

Όπου η τιμή μπορεί να λάβει πραγματικές τιμές στην περιοχή από 0,0 έως 1,0. Η τιμή 1,0 σημαίνει ότι δεν υπάρχει διαφάνεια (προεπιλογή).

Παράδειγμα #1. διαφανής εικόνα σε html

Η πρώτη εικόνα αποδίδεται χωρίς διαφάνεια, η δεύτερη με διαφάνεια 0,5.

Ημιδιαφάνεια στοιχείου

Κάνοντας την εικόνα ημιδιαφανή στο hover!

DemoΛήψη πηγών

Σας ευχαριστώ για την προσοχή σας!

Επόμενο άρθρο
Πώς να δημιουργήσετε ένα κυλιόμενο div;