Η διαφάνεια στο 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 είναι ότι η ρύθμιση διαφάνειας δεν εφαρμόζεται σε θυγατρικά στοιχεία, ενώ η χρήση της ιδιότητας αδιαφάνειας κληρονομείται.

Καλημέρα, 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

Ωστόσο, αυτή η μέθοδος δεν είναι βολική για διάφορους λόγους:

1. Ο Internet Explorer 6 δεν λειτουργεί με αυτήν την τεχνολογία, πρέπει να γράψετε κώδικα σεναρίου.
2. Δεν μπορείτε να αλλάξετε τα χρώματα φόντου στο css.
3. Εάν η λειτουργία εμφάνισης εικόνων του προγράμματος περιήγησης είναι απενεργοποιημένη, θα εξαφανιστεί.

Μέθοδος 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, η μεταβλητή A είναι υπεύθυνη για το κανάλι άλφα, το οποίο με τη σειρά του είναι υπεύθυνο για τη διαφάνεια.

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

Το rgba(r, g, b, a) υποστηρίζεται ξεκινώντας από:

• Opera έκδοση 10.
• 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%.

Με την έλευση του CSS3, η δουλειά των σχεδιαστών διάταξης έχει γίνει από πολλές απόψεις πιο απλή και πιο λογική: τελικά, τώρα μπορείτε πραγματικά να διαμορφώσετε με ευελιξία οποιοδήποτε αντικείμενο, καταφεύγοντας σε JavaScript όλο και λιγότερο. Ας υποθέσουμε ότι πρέπει να προσαρμόσετε τη διαφάνεια του φόντου - το CSS προσφέρει αμέσως πολλές επιλογές.

Το φόντο καθορίζεται από ένα σύνολο χαρακτηριστικών, background-repeat, background-attachment, background-origin, background-clip, background-color) και καθένα από αυτά μπορεί να καθοριστεί ξεχωριστά ή να συνδυαστεί κάτω από το χαρακτηριστικό background. Ας δούμε το καθένα από αυτά με περισσότερες λεπτομέρειες.

χαρακτηριστικό χρώματος φόντου

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

χαρακτηριστικό background-position

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

σώμα (φόντο-θέση: δεξιά στο κέντρο;) - σε αυτό το παράδειγμα, το φόντο θα βρίσκεται στη δεξιά πλευρά της σελίδας και οι αποστάσεις από το κάτω και το επάνω μέρος στην εικόνα είναι ίδιες.

χαρακτηριστικό μέγεθος φόντου

Μερικές φορές χρειάζεται να χρησιμοποιήσετε CSS για να τεντώσετε το φόντο ή να μειώσετε το μέγεθός του. Για να το κάνετε αυτό, χρησιμοποιήστε το χαρακτηριστικό background-size και το μέγεθος φόντου μπορεί να οριστεί είτε σε pixels ή ποσοστά, είτε σε οποιαδήποτε άλλη μονάδα μέτρησης.

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

χαρακτηριστικό background-attachment

Αυτό το χαρακτηριστικό καθορίζει τη συμπεριφορά της εικόνας φόντου κατά την κύλιση. Έτσι, μπορεί να πάρει 3 τιμές (χωρίς να λαμβάνεται υπόψη η κληρονομικότητα, η οποία είναι κοινή σε όλα τα χαρακτηριστικά που παρουσιάζονται σε αυτό το άρθρο):

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

Παράδειγμα χρήσης:

σώμα (φόντο-προσάρτημα σταθερό).

Ο Firefox προς το παρόν δεν υποστηρίζει την τελευταία ιδιότητα (τοπική).

χαρακτηριστικό background-origin

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

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

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

χαρακτηριστικό background-repeat

Κατά κανόνα, εάν το φόντο δίνεται από μια εικόνα, θα πρέπει να επαναλαμβάνεται οριζόντια ή κάθετα. Για αυτό χρησιμοποιείται το χαρακτηριστικό background-repeat. Έτσι, το φόντο ενός μπλοκ του οποίου το CSS περιέχει μια τέτοια ιδιότητα μπορεί να έχει μία από πολλές παραμέτρους:

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

Παράδειγμα χρήσης χαρακτηριστικών:

σώμα (background-repeat: non-repeat repeat)- παρόμοια φόντο-επανάληψη: επανάληψη-υ.

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

χαρακτηριστικό κλιπ φόντου

Αυτό το χαρακτηριστικό ορίζει τη συμπεριφορά του φόντου κάτω από τα περιγράμματα (για παράδειγμα, στην περίπτωση των διακεκομμένων περιγραμμάτων):

• padding-box— το φόντο εμφανίζεται αυστηρά μέσα στο μπλοκ.
• περίγραμμα-κουτί- η εικόνα ταιριάζει στο πλαίσιο.
• πλαίσιο περιεχομένου— η εικόνα στο παρασκήνιο εμφανίζεται μόνο μέσα στο περιεχόμενο.

Παράδειγμα χρήσης:

σώμα (φόντο-κλιπ: περιεχόμενο-πλαίσιο;).

Το Chrom και το Safari απαιτούν το πρόθεμα -webkit-.

Χαρακτηριστικά αδιαφάνειας και φίλτρου

Το χαρακτηριστικό opacity σάς επιτρέπει να ορίσετε τη διαφάνεια του φόντου - η ιδιότητα CSS θα λειτουργεί σε όλα τα προγράμματα περιήγησης. Η τιμή μπορεί να οριστεί από 0,0 έως 1,0 συμπεριλαμβανομένου. Ταυτόχρονα, μπορείτε να ορίσετε τη διαφάνεια φόντου CSS χωρίς ακέραια τιμή: αντί για 0,3, απλώς γράψτε.3:

.block (φόντο-εικόνα: url(img.png); αδιαφάνεια: .3;).

Για να ορίσετε τη διαφάνεια φόντου, το CSS του οποίου θα λειτουργεί ακόμη και για IE κάτω από την έκδοση 9, χρησιμοποιήστε το χαρακτηριστικό φίλτρου:

.block (εικόνα φόντου: url(img.png); φίλτρο: άλφα (αδιαφάνεια=30);).

Σε αυτήν την περίπτωση, η τιμή αδιαφάνειας ορίζεται στην περιοχή από 0 έως 100. Λάβετε υπόψη ότι το χαρακτηριστικό αδιαφάνειας διαφέρει από τη ρύθμιση της διαφάνειας με χρήση RGBA βάσει κληρονομικότητας: όταν χρησιμοποιείτε αδιαφάνεια, όχι μόνο το φόντο γίνεται διαφανές, αλλά και όλα τα στοιχεία μέσα στο μπλοκ .

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

Βαθμολογία 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. Σύμφωνα με την προδιαγραφή, ισχύει για κάθε τύπο κόμβου και υποστηρίζεται σε όλα τα σύγχρονα προγράμματα περιήγησης. Με τη βοήθειά του, μπορείτε να δημιουργήσετε ένα ενδιαφέρον σχέδιο ή να εφαρμόσετε βολική διαδραστική αλληλεπίδραση με τον χρήστη.

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

Η σύνταξη για την ιδιότητα αδιαφάνειας στο 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.