Όλα όσα πρέπει να ξέρετε για την αδιαφάνεια στο CSS

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

• Αδιαφάνεια στο CSS
• Η αδιαφάνεια κληρονομείται με επικαλυπτόμενα στοιχεία
• Ρύθμιση χαρακτηριστικού RGBA για διαδοχικά στοιχεία
• Η αδιαφάνεια αλλάζει στο εφέ αιωρήματος

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

Το πιο συνηθισμένο σενάριο στο οποίο χρησιμοποιείται αυτή η δυνατότητα είναι αυτό:

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

Ίσως θέλετε να διαβάσετε στο πριν ξεκινήσετε να μαθαίνετε για την αδιαφάνεια CSS.

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

Προχωρώντας με αυτό το άρθρο σχετικά με την αδιαφάνεια στο CSS

Αδιαφάνεια στο CSS

Στο CSS, το Opacity ορίζεται ως αριθμητική τιμή που κυμαίνεται μεταξύ 0,0 - 1,0. Οι τιμές που πλησιάζουν το μηδέν αντιπροσωπεύουν περισσότερη διαφάνεια, η εικόνα θα είναι πολύ ελαφριά στην ορατότητα. Ας ξεκινήσουμε με ένα παράδειγμα εμφάνισης μιας εικόνας με διαφάνεια 50%. Δείτε το Παράδειγμα 1 παρακάτω.

Παράδειγμα 1: Η εικόνα φόντου ορίστηκε σε ημι- διαφάνεια

img {αδιαφάνεια: 0,5 φίλτρο: άλφα (αδιαφάνεια = 50) / * Για IE8 και παλαιότερες * /}  

Παράδειγμα 1: Έξοδος

διαφορά μεταξύ υπέρβασης και υπερφόρτωσης στην Java

Πρωτότυπη εικόνα (100% αδιαφάνεια)

Εικόνα με ρύθμιση αδιαφάνειας 50%

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

Προχωρώντας με αυτό το άρθρο σχετικά με την αδιαφάνεια στο CSS

μαριονέτα εναντίον σεφ εναντίον

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

Όταν τα στοιχεία στοιβάζονται το ένα πάνω στο άλλο, εάν το στοιχείο φόντου έχει τη ρύθμιση αδιαφάνειας, τότε κληρονομείται από όλα τα θυγατρικά στοιχεία. Αυτό είναι το προεπιλεγμένη ρύθμιση . Αυτό σημαίνει ότι εάν ένα πλαίσιο κειμένου τοποθετηθεί πάνω από μια εικόνα και η εικόνα έχει ρύθμιση 0,5 αδιαφάνειας, τότε τόσο η εικόνα όσο και το στοιχείο κειμένου θα είναι μόνο εν μέρει ορατά.

Ας πάρουμε την παρουσία ενός παιδικού στοιχείου κειμένου που τοποθετείται πάνω από την εικόνα TOM & JERRY στο επόμενο Παράδειγμά μας. Μπορούμε να δούμε το προεπιλεγμένο εφέ αδιαφάνειας στο Παράδειγμα 2.

.container {θέση: σχετική ευθυγράμμιση κειμένου: κεντρική αδιαφάνεια: 0,5}. κεντραρισμένη {θέση: απόλυτη κορυφή: 50% αριστερά: 50% μετασχηματισμός: μετάφραση (-50%, -50%) χρώμα: μπλε γραμματοσειρά-μέγεθος: 40px} } ΤΟΜ & ΤΖΕΡΙ

Παράδειγμα 2: Το κείμενο κληρονομεί την αδιαφάνεια από τη γονική εικόνα

Προχωρώντας με αυτό το άρθρο σχετικά με την αδιαφάνεια στο CSS

Ρύθμιση χαρακτηριστικού RGBA για διαδοχικά στοιχεία

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

Παράδειγμα 3: Χρήση της ρύθμισης RGBA

φόντο: rgba (76, 175, 80, 1.0) / * Η εικόνα δεν έχει ρύθμιση αδιαφάνειας * / / * Πράσινο φόντο για κείμενο με αδιαφάνεια 100% * / / * Το μπλε χρώμα κειμένου έχει αδιαφάνεια 100% * /

φόντο: rgba (76, 175, 80, 0.4) / * Η εικόνα δεν έχει ρύθμιση αδιαφάνειας * / / * Πράσινο φόντο για κείμενο με αδιαφάνεια 40% * / / * Το μπλε κείμενο εξακολουθεί να εμφανίζεται με 100% αδιαφάνεια * /

c ++ ταξινόμηση int array

Μετά τον κωδικό χρώματος RGB, το χαρακτηριστικό «a» σημαίνει άλφα . ο άλφα η παράμετρος είναι ένας αριθμός μεταξύ 0,0 (πλήρως διαφανής) και 1,0 (πλήρως αδιαφανής).

Προχωρώντας με αυτό το άρθρο σχετικά με την αδιαφάνεια στο CSS

Η αδιαφάνεια αλλάζει στο εφέ αιωρήματος

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

Το παράδειγμα 4 δείχνει πώς γίνεται αυτό.

Κοινά σημεία που πρέπει να σημειωθούν:

• Η ρύθμιση αδιαφάνειας είναι μια εναλλακτική λύση για τη χρήση του χαρακτηριστικού «ορατότητα» στο CSS. Ωστόσο, η χρήση της ρύθμισης αδιαφάνειας διευκολύνει τον ορισμό διαφόρων βαθμών διαφάνειας, που κυμαίνονται από μηδέν έως πλήρες.
• Το επίπεδο αδιαφάνειας πρέπει να ρυθμιστεί μετά από προσεκτική δοκιμή σε διάφορα προγράμματα περιήγησης. Όταν η αδιαφάνεια έχει οριστεί σε χαμηλές τιμές, μερικές φορές το κείμενο ή η εικόνα μπορεί να γίνουν εντελώς αόρατα ή δυσανάγνωστα.
• Η ιδέα πίσω από τη χρήση της αδιαφάνειας είναι να δοθεί έντονη εστίαση σε ορισμένα στοιχεία, ενώ άλλα στοιχεία φόντου δεν αποσπούν την προσοχή του χρήστη. Έτσι, τέτοια στοιχεία φόντου ρυθμίζονται με χαμηλότερη αδιαφάνεια.
• Στον Internet Explorer, για IE8 και παλαιότερες εκδόσεις, η ιδιότητα αδιαφάνειας είναι μια ρύθμιση «φίλτρου» που κυμαίνεται από 1 έως 100. Σε όλα τα άλλα προγράμματα περιήγησης, κυμαίνεται από 0 έως 1.

Αυτό μας φέρνει στο τέλος αυτού του άρθρου σχετικά με το Opacity In CSS.

Εάν σας ενδιαφέρει να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3)

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