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

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

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

Διαφάνεια μέσω CSS Opacity

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

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, σε αντίθεση με το Opacity, δεν επηρεάζει τα θυγατρικά στοιχεία.

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

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

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

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

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

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

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

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

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

.μπλε (
φόντο: rgba(0, 120, 201, 0.3);
φίλτρο: άλφα(Αδιαφάνεια=30); /* Διαφάνεια στο IE */
}

συμπέρασμα

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

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

Το orem Ipsum είναι απλώς εικονικό κείμενο της βιομηχανίας εκτύπωσης και στοιχειοθεσίας. Το Lorem Ipsum είναι το τυπικό εικονικό κείμενο της βιομηχανίας από το 1500, όταν ένας άγνωστος εκτυπωτής πήρε μια γαλέρα τύπου και την ανακάτεψε για να φτιάξει ένα βιβλίο τύπων. Έχει επιβιώσει όχι μόνο πέντε αιώνες, αλλά και το άλμα στην ηλεκτρονική στοιχειοθέτηση Διαδόθηκε στη δεκαετία του 1960 με την κυκλοφορία των φύλλων Letraset που περιείχαν αποσπάσματα Lorem Ipsum και πιο πρόσφατα με το λογισμικό επιτραπέζιων εκδόσεων όπως το Aldus PageMaker, συμπεριλαμβανομένων των εκδόσεων του Lorem Ipsum.
Είναι από καιρό καθιερωμένο γεγονός ότι ο αναγνώστης θα αποσπαστεί από το αναγνώσιμο περιεχόμενο μιας σελίδας όταν κοιτάζει τη διάταξή της. Το νόημα της χρήσης του Lorem Ipsum είναι ότι έχει μια λίγο πολύ κανονική κατανομή γραμμάτων, σε αντίθεση με τη χρήση του "Περιεχόμενο εδώ, περιεχόμενο εδώ", κάνοντάς το να μοιάζει με ευανάγνωστα αγγλικά. Πολλά πακέτα επιτραπέζιων εκδόσεων και συντάκτες ιστοσελίδων χρησιμοποιούν πλέον το Lorem Ipsum ως το προεπιλεγμένο κείμενο μοντέλου και μια αναζήτηση για το "lorem ipsum" θα αποκαλύψει πολλούς ιστότοπους που βρίσκονται ακόμη σε αρχικό στάδιο. Διάφορες εκδοχές έχουν εξελιχθεί με τα χρόνια, άλλοτε τυχαία, άλλοτε επίτηδες (ενέσιμο χιούμορ και τα παρόμοια).

Έτσι, σήμερα θα μιλήσουμε για διαφάνεια σε σελίδες html. Πιθανότατα έχετε συναντήσει διαφανή μπλοκ αναδυόμενων παραθύρων, είτε πρόκειται για γκαλερί φωτογραφιών είτε για φόρμες σύνδεσης σε κάποια δημοφιλή ιστοσελίδα. Υπάρχουν πολλές χρήσεις για τη διαφάνεια στην HTML. Πώς φτιάχνεται λοιπόν και πού μπορεί να χρησιμοποιηθεί;

Λοιπόν, πρώτα απ 'όλα, ας καταλάβουμε ότι το έγγραφό μας δεν έχει μόνο ένα επίπεδο παρακολούθησης - είναι γενικά τρισδιάστατο, το ανέφερα στο άρθρο "Z-index". Αντίστοιχα, ακόμη και ένα εντελώς διαφανές στρώμα, αν βρισκόταν στην κορυφή της στοίβας της οθόνης, θα εμπόδιζε την πρόσβαση σε άλλα στοιχεία. Αυτή είναι μια από τις κύριες χρήσεις των διαφανών μπλοκ. Αν και χρησιμοποιείται συνήθως ένα εφέ σκίασης, ένα εντελώς διαφανές στρώμα θα λειτουργήσει ακριβώς το ίδιο. Έτσι, για παράδειγμα, λειτουργούν πολλές δημοφιλείς γκαλερί φωτογραφιών· οργανώνεται ένα σκιασμένο στρώμα στο οποίο εμφανίζονται φωτογραφίες και στοιχεία ελέγχου για αυτές. Το υπόλοιπο μέρος της σελίδας «καλύπτεται» με ένα (ημι) διαφανές στρώμα, που εμποδίζει την πρόσβαση σε όλα τα άλλα στοιχεία της σελίδας. Εκείνοι. Δεν θα μπορείτε να φύγετε από τη σελίδα κάνοντας κλικ σε οποιοδήποτε σύνδεσμο σε αυτήν - όλο το κείμενο καλύπτεται με φόντο. Για να επιστρέψετε στο κύριο μέρος του ιστότοπου, συνήθως παρέχουν στοιχεία ελέγχου για το κλείσιμο της συλλογής, τη φόρμα σύνδεσης κ.λπ. Έλεγχος εμφάνισης/απόκρυψης διαφανών μπλοκ με χρήση javascript. Δυστυχώς, δεν υπάρχει εναλλακτική λύση. Χωρίς να το χρησιμοποιήσει, ο χρήστης είτε δεν θα δει καθόλου το διαφανές μπλοκ είτε δεν θα μπορεί να το κλείσει χωρίς να φύγει από την τρέχουσα σελίδα. Σημειώνω ότι για αυτό χρησιμοποιούνται ιδιότητες ορατότητας ή εμφάνισης.

Πώς οργανώνεται λοιπόν η διαφάνεια στην html; Η διαφάνεια του στοιχείου ρύθμισης γενικά δεν περιλαμβάνεται στην προδιαγραφή CSS, επομένως πρέπει να χρησιμοποιήσετε πολλές οδηγίες ταυτόχρονα για να το δημιουργήσετε. Ορισμένα προγράμματα περιήγησης (δηλαδή) θα λειτουργούν με μια επιλογή, άλλα με μια άλλη. Χρησιμοποιεί δηλαδή την ενσωματωμένη λειτουργία φίλτρου, άλλα προγράμματα περιήγησης χρησιμοποιούν την ιδιότητα "αδιαφάνεια", η οποία ορίζεται στην περιοχή από 0 (εντελώς διαφανές αντικείμενο) έως 1 (εντελώς αδιαφανές). Για παράδειγμα, στην περίπτωση διαφάνειας 30%, θα πρέπει να γράψετε "αδιαφάνεια: 0,30; φίλτρο: άλφα(αδιαφάνεια=30); ". Οι ιδιότητες, όπως φαίνεται από το παράδειγμα, είναι παρόμοιες - μόνο στην πρώτη περίπτωση χρησιμοποιείται ένας αριθμός από το 0 έως το 1, στη δεύτερη χρησιμοποιείται ένας συμβολισμός ποσοστού. Ένα παράδειγμα τέτοιου μπλοκ: