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

σύντομες πληροφορίες

Ονομασίες

	Περιγραφή	Παράδειγμα
<тип>	Υποδεικνύει τον τύπο της τιμής.	<размер>
Α & & Β	Οι τιμές πρέπει να εξάγονται με τη σειρά που καθορίζεται.	<размер> && <цвет>
A | σι	Υποδεικνύει ότι πρέπει να επιλέξετε μόνο μία τιμή από τις προτεινόμενες (A ή B).	κανονικό | μικρά καπάκια
Α || σι	Κάθε τιμή μπορεί να χρησιμοποιηθεί ανεξάρτητα ή μαζί με άλλες με οποιαδήποτε σειρά.	πλάτος || μετρώ
	Ομαδικές αξίες.	[ καλλιέργεια || σταυρός]
*	Επαναλάβετε μηδέν ή περισσότερες φορές.	[,<время>]*
+	Επαναλάβετε μία ή περισσότερες φορές.	<число>+
?	Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική.	ένθεση?
(Α, Β)	Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές.	<радиус>{1,4}
#	Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα.	<время>#

×

Αξίες

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

Sandbox

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

div (αδιαφάνεια: 1; )

Παράδειγμα

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Αποτέλεσμα χρήσης αδιαφάνειας

Μοντέλο αντικειμένου

Ενα αντικείμενο.στυλ.αδιαφάνεια

Σημείωση

Ο Firefox μέχρι την έκδοση 3.5 υποστηρίζει την ιδιότητα -moz-opacity.

Ο Internet Explorer έως την έκδοση 9.0 χρησιμοποιεί φίλτρα για την αλλαγή της διαφάνειας για αυτό το πρόγραμμα περιήγησης θα πρέπει να γράψετε φίλτρο : alpha(opacity=50), όπου η παράμετρος αδιαφάνειας μπορεί να πάρει μια τιμή από 0 έως 100.

Προσδιορισμός

Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.

• Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
• Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
• Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Γνωμοδοτικό Συμβούλιο του W3C για τελική έγκριση.
• Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
• προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
• προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.

×

Βλαντ Μέρζεβιτς

Το ημιδιαφανές εφέ ενός στοιχείου είναι σαφώς ορατό στην εικόνα φόντου και έχει γίνει ευρέως διαδεδομένο σε διαφορετικά λειτουργικά συστήματα επειδή φαίνεται κομψό και όμορφο. Στη σχεδίαση ιστοσελίδων, χρησιμοποιείται επίσης η διαφάνεια και επιτυγχάνεται μέσω της ιδιότητας αδιαφάνειας ή της μορφής χρώματος RGBA που έχει οριστεί για το φόντο.

Μπλοκ ντεγκραντέ

Δημιουργήστε το μπλοκ που φαίνεται στο Σχ. 1. Το μπλοκ περιέχει ένα ημιδιαφανές ντεγκραντέ πλαίσιο με ντεγκραντέ φόντο κάτω από τον τίτλο και έναν μικρό δείκτη. Το φόντο στη σελίδα παρέχεται μόνο για σαφήνεια του εφέ ημιδιαφάνειας, μπορείτε να υποδείξετε οποιαδήποτε δική σας εικόνα. Το ελάχιστο ύψος μπλοκ είναι 100 px.

Πώς να κάνετε ένα στρώμα ημιδιαφανές;

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

Ημιδιαφανές φόντο

Βλαντ Μέρζεβιτς

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

Πώς να ορίσετε έναν πίνακα ώστε να είναι ημιδιαφανής, αλλά ορισμένα κελιά δεν είναι;

Για να αλλάξετε τη διαφάνεια ενός στοιχείου, το CSS3 παρέχει την ιδιότητα αδιαφάνειας, η τιμή του μπορεί να κυμαίνεται από 0 έως 1. Το μηδέν αντιστοιχεί στην πλήρη διαφάνεια του στοιχείου, και ένα, αντίθετα, στην αδιαφάνεια. Τα σύγχρονα προγράμματα περιήγησης λειτουργούν αρκετά σωστά με αυτήν την ιδιότητα, με εξαίρεση το πρόγραμμα περιήγησης Internet Explorer, επομένως για αυτό πρέπει να χρησιμοποιήσετε μια ειδική ιδιότητα φίλτρου με την τιμή alpha(Opacity=X) , όπου το X μπορεί να ποικίλλει από 0 έως 100.

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

Πιθανές τιμές

Η σύνταξη για την ιδιότητα αδιαφάνειας στο css μοιάζει με αυτό:

Επιλογέας (αδιαφάνεια: 1; ) επιλογέας (αδιαφάνεια: 0; ) επιλογέας (αδιαφάνεια: 0,4; )

Η είσοδος δέχεται αριθμητικές τιμές στην περιοχή από 0 έως 1. Η παράμετρος μπορεί να αντιπροσωπεύει κλάσματα μιας μονάδας, ενώ μια τελεία χρησιμοποιείται ως διαχωριστικό δεκαδικών στο CSS.

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

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

Διαφάνεια παιδικών κόμβων

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

Γονέας (αδιαφάνεια: 0,7; ) παιδί (αδιαφάνεια: 1; )

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

Παραδείγματα χρήσης

Παράδειγμα 1: Διαφάνεια. Είναι απαραίτητο το κύριο φόντο του μπλοκ να είναι ορατό κάτω από το στοιχείο στόχο.

Στόχος ( φόντο: μαύρο, αδιαφάνεια: 0,5; )

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

Παράδειγμα 2: Δυναμικός έλεγχος διαφάνειας. Η τιμή της ιδιότητας αδιαφάνειας CSS του μπλοκ προορισμού αλλάζει όταν τοποθετείτε το δείκτη του ποντικιού πάνω του.

Στόχος ( αδιαφάνεια: 0,2; ) .target:hover ( αδιαφάνεια: 1; )

Δυναμική διαφάνεια

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

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

// λήψη της τρέχουσας τιμής αδιαφάνειας var opacity = element.style.opacity; // ορίζοντας μια νέα τιμή στοιχείο.style.opacity = 0.4;

Η ομαλή εξαφάνιση ενός μπλοκ μπορεί να επιτευχθεί χρησιμοποιώντας την ιδιότητα μετάβασης CSS:

Στοιχείο ( αδιαφάνεια: 0,1, μετάβαση: αδιαφάνεια 1000 ms; ) στοιχείο: αιώρηση ( αδιαφάνεια: 0,8, μετάβαση: αδιαφάνεια 2000 ms; )

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

Η ιδιότητα αδιαφάνειας CSS σε συνδυασμό με τον μηχανισμό μετάβασης σάς επιτρέπει να δημιουργείτε όμορφα εφέ.

Κανάλι άλφα αντί για αδιαφάνεια

Οι κύριες λεπτές αποχρώσεις του μηχανισμού αδιαφάνειας στο CSS:

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

Εάν αυτά τα εφέ περιπλέκουν τη ζωή του σχεδιαστή διάταξης, αντί για αδιαφάνεια, θα πρέπει να χρησιμοποιήσετε ένα απλό διαφανές φόντο, προσδιορίζοντας την τιμή του σε μορφή RGBA ή HSLA.

Βαθμολογία 1 Βαθμολογία 2 Βαθμολογία 3 Βαθμολογία 4 Βαθμολογία 5

Λεπτομέρειες Κατηγορία: web designer Συγγραφέας: SEO & WEB - KELL4

Δημιουργία διαφανούς φόντου σε 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

Η αδιαφάνεια του φόντου έχει οριστεί στο 90% - ημιδιαφανές φόντο και αδιαφανές κείμενο.

Σε αυτό το μάθημα θα εξετάσουμε τέτοια CSSιδιότητες - αδιαφάνειαΚαι RGBA. Ιδιοκτησία Αδιαφάνειαείναι υπεύθυνη μόνο για τη διαφάνεια των στοιχείων, και τη λειτουργία RGBA– για χρώμα και διαφάνεια, εάν καθορίσετε την τιμή διαφάνειας του καναλιού άλφα.

Διαφάνεια CSS Αδιαφάνεια

Ψηφιακή αξία για αδιαφάνειαορίζεται στην περιοχή από 0,0 έως 1,0, όπου το μηδέν είναι η πλήρης διαφάνεια και το ένα, αντίθετα, είναι η απόλυτη αδιαφάνεια. Για παράδειγμα, για να δείτε 50% διαφάνεια, πρέπει να ορίσετε την τιμή στο 0,5. Πρέπει να ληφθεί υπόψη ότι αδιαφάνειαδιαδίδεται σε όλα τα τέκνα στοιχεία του γονέα. Αυτό σημαίνει ότι το κείμενο σε ημιδιαφανές φόντο θα είναι επίσης ημιδιαφανές. Και αυτό είναι ένα πολύ σημαντικό μειονέκτημα το κείμενο δεν ξεχωρίζει τόσο καλά.

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

Div(
φόντο: url(images/yourimage.jpg); /* Εικόνα φόντου */
πλάτος: 750 px;
ύψος: 100 px;
περιθώριο: αυτόματο;
}
.μπλε (
φόντο: #027av4; /* Ημιδιαφανές χρώμα φόντου */
αδιαφάνεια: 0,3; /* Τιμή διαφάνειας φόντου */
ύψος: 70 px;
}
h1 (
padding: 6px;
γραμματοσειρά-οικογένεια: Arial Black;
βάρος γραμματοσειράς: πιο τολμηρή;
μέγεθος γραμματοσειράς: 50 px;
}

Διαφάνεια CSS σε μορφή RGBA

Μορφή για έγχρωμη εγγραφή RGBA, είναι μια πιο σύγχρονη εναλλακτική για το ακίνητο αδιαφάνεια. R (κόκκινο), G (πράσινο), B (μπλε)- σημαίνει: κόκκινο, πράσινο, μπλε. Τελευταίο γράμμα ΕΝΑ– σημαίνει κανάλι άλφα, που ορίζει τη διαφάνεια. RGBAΔιαφορετικός Αδιαφάνειαδεν επηρεάζει τα παιδικά στοιχεία.

Τώρα ας δούμε το παράδειγμά μας χρησιμοποιώντας RGBA. Ας αντικαταστήσουμε αυτές τις γραμμές στα στυλ.

Φόντο: ##027av4; /* Χρώμα του φόντου */
αδιαφάνεια: 0,3; /* τιμή διαφάνειας φόντου */

στην επόμενη γραμμή

Υπόβαθρο: rgba(2, 127, 212, 0.3);

Όπως μπορείτε να δείτε, η τιμή διαφάνειας 0,3 είναι η ίδια και για τις δύο μεθόδους.

Αποτέλεσμα του παραδείγματος RGBA:

Το δεύτερο στιγμιότυπο οθόνης φαίνεται πολύ καλύτερο από το πρώτο.

Παίζοντας με την ημιδιαφάνεια του φόντου των μπλοκ, μπορείτε να επιτύχετε ενδιαφέροντα εφέ στον ιστότοπό σας. Είναι σημαντικό αυτά τα ημιδιαφανή τετράγωνα να πάνε πάνω από ένα πολύχρωμο σχέδιο, όπως μια φωτογραφία. Μόνο σε αυτή την περίπτωση το αποτέλεσμα θα είναι αισθητό. Αυτή η τεχνική έχει χρησιμοποιηθεί από καιρό στο σχεδιασμό, ακόμη και πριν από την εμφάνιση οποιασδήποτε CSS3, υλοποιήθηκε καθαρά σε γραφικά προγράμματα.

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

συμπέρασμα

Μορφή RGBAυποστηρίζει όλα τα σύγχρονα προγράμματα περιήγησης, εκτός από Internet Explorer. Είναι επίσης πολύ σημαντικό ότι RGBAευέλικτο, δρα μόνο σε ένα συγκεκριμένο καθορισμένο στοιχείο, χωρίς να επηρεάζει τα παιδιά του. Είναι σαφές ότι αυτό είναι πιο βολικό για τον σχεδιαστή διάταξης. Η επιλογή μου είναι σίγουρα υπέρ της μορφής RGBAγια να πάρεις διαφάνεια στο CSS.

Για καλύτερη εμπέδωση του υλικού και μεγαλύτερη σαφήνεια, σας προτείνω να περάσετε.