Στο 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, το έργο των σχεδιαστών διάταξης έγινε πολύ πιο απλό και λογικό: τελικά, τώρα μπορείτε πραγματικά να διαμορφώσετε με ευελιξία οποιοδήποτε αντικείμενο, καταφεύγοντας σε JavaScript όλο και λιγότερο. Ας υποθέσουμε ότι πρέπει να προσαρμόσετε τη διαφάνεια του φόντου - το CSS προσφέρει αμέσως πολλές επιλογές.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ένα παράδειγμα χρήσης του χαρακτηριστικού:

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

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

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

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

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

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

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

Το Chrom και το Safari απαιτούν τη χρήση του προθέματος -webkit.

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

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

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

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

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

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

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

Σε αυτό το μάθημα, θα ρίξουμε μια ματιά σε αυτά 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.

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

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

ιδιότητα αδιαφάνειας

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

Το Παράδειγμα 1 δείχνει πώς να δημιουργήσετε ένα ημιδιαφανές πλαίσιο χρησιμοποιώντας αδιαφάνεια.

Παράδειγμα 1: Φόντο σε ιστοσελίδα

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

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

Ρύζι. 1. Σύνταξη χρήσης rgba

Το Παράδειγμα 2 δείχνει τη χρήση της μορφής RGBA για τη δημιουργία ημιδιαφανούς φόντου.

Παράδειγμα 2: Ημιδιαφανές φόντο

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2. Η τιμή αδιαφάνειας για το φόντο έχει οριστεί στο 90%.

Ρύζι. 2. Ημιδιαφανές φόντο και αδιαφανές κείμενο