CSS Διαφάνεια φόντου. Διαφανές φόντο ή κείμενο χρησιμοποιώντας CSS
Με την έλευση του CSS3, το έργο των σχεδιαστών σχεδιαγράμματος από πολλές απόψειςέγινε απλούστερη και πιο λογική: στην πραγματικότητα τώρα είναι δυνατόν πραγματικά να δημιουργηθεί με ευελιξία ένα αντικείμενο, ακόμα λιγότερο προσφυγής σε JavaScript. Ας υποθέσουμε ότι πρέπει να προσαρμόσετε τη διαφάνεια του φόντου - το CSS προσφέρει αμέσως αρκετές επιλογές.
Το φόντο καθορίζεται από ένα σύνολο χαρακτηριστικών (φόντο-εικόνα,θέση φόντου, μέγεθος φόντου, επανάληψη φόντου, προσάρτηση φόντου, αρχική προέλευση, κλιπ φόντου, χρώμα φόντου), καθένα από τα οποία μπορεί να καταχωρηθεί ή να συνδυαστεί χωριστά με το χαρακτηριστικό φόντου. Ας αναλύσουμε καθένα από αυτά με περισσότερες λεπτομέρειες.
Το χαρακτηριστικό χρώματος φόντου
Στο CSS, μπορείτε να καθορίσετε το χρώμα φόντου με διάφορους τρόπους: χρησιμοποιώντας δεκαεξαδικό κώδικα, όνομα χρώματος ή μια εγγραφή RGB. Στο CSS3, έγινε δυνατή η χρήση της επιλογής RGBA αντί της εγγραφής RGB.
Ο δεκαεξαδικός κωδικός χρώματος είναι γραμμένος σειδιότητα μετά το πλέγμα: χρώμα φόντου: # FFDAB9. Αν οι χαρακτήρες σε ένα τέτοιο αρχείο αντιστοιχούν σε ζεύγη, ο κώδικας συνήθως ελαττώνεται ελαφρώς: # ccff00 μπορεί να γραφτεί ως # cf0:
σώμα {χρώμα-φόντο: # cf0;}.
Το όνομα είναι ακόμα και στα πιο εξωτικά λουλούδια. Για παράδειγμα, εκτός από το κανονικό κόκκινο και λευκό, μπορείτε να χρησιμοποιήσετε το NavajoWhite (#FFDEAD) ή το Honeydew2 (# E0EEE0):
σώμα {χρώμα-φόντο: μοβ}.
Η τελευταία έκδοση της εγγραφής RGB ή RGBA επιτρέπειορίστε όχι μόνο το χρώμα αλλά και τη διαφάνεια του φόντου CSS, αλλά η μέθοδος λειτουργεί σε IE μόνο πάνω από την έκδοση 9. Άλλα προγράμματα περιήγησης συνήθως αναγνωρίζουν την επιλογή με διαφάνεια. Σύμφωνα με τα πρότυπα του W3C, είναι προτιμότερο να χρησιμοποιείται RGBA αντί για το πιο συνηθισμένο RGB.
Η τελευταία τιμή για το RGBA και ορίζει την αδιαφάνεια του φόντου από το 0 (διαφανές) στο 1 (αδιαφανές).
Υπάρχουν κάποιες πιο ασυνήθιστες έννοιες. Το χρώμα του φόντου μπορεί να ρυθμιστεί χρησιμοποιώντας το HSL και Εκθεση Πεπραγμένων. Τόσο προστέθηκαν σε CSS3, και ως εκ τούτου δεν υποστηρίζονται από IE έκδοση 9 ή υψηλότερο. Ενσωματώσεις πανομοιότυπα RGB ή RGBA, μόνο σε μια διαφορετική μορφή: Hue (απόχρωση - τιμή στον τροχό χρωμάτων, δίνεται σε μοίρες), κορεσμένων (κορεσμός - ένταση του χρώματος ως ποσοστό, από 0 έως 100), ελαφρότητα (ελαφρότητα - φωτεινότητα, μετρούμενη παρομοίως παράμετρο Κορεσμός ).
Το χαρακτηριστικό φόντου-εικόνας
Η πιο cross-browser έκδοση του διαφανούς φόντου είναι η χρήση της εικόνας. Στο CSS3, μπορείτε να ορίσετε ακόμη και μερικές εικόνες, αυτό γίνεται με κόμμα. Παράδειγμα:
σώμα {φόντο-εικόνα: url (bg1.png), url (bg2.png)}.
Αυτή η μέθοδος υποστηρίζεται ακόμα και από το IE8. Αρκετές εικόνες ως φόντο χρησιμοποιούνται για την επιβολή ελαστικών. Το κύριο πράγμα, μην ξεχνάτε, όταν χρησιμοποιείτε οποιαδήποτε εικόνα, επίσης να ορίσετε το χρώμα φόντου στο CSS, αφού οι χρήστες απλά δεν μπορούν να εκκινήσουν την εικόνα.
Το χαρακτηριστικό φόντο-θέση
Εάν χρησιμοποιείτε μια εικόνα για να καθορίσετε ένα φόντοblock, το CSS σάς επιτρέπει να τοποθετήσετε την εικόνα οπουδήποτε στην οθόνη. Από προεπιλογή, η εικόνα βρίσκεται στην επάνω αριστερή γωνία. Το χαρακτηριστικό αυτό λαμβάνει είτε λεκτικές οδηγίες (πάνω, κάτω, αριστερά, δεξιά) ή αριθμητικές (ποσοστά, εικονοστοιχεία και άλλες μονάδες μέτρησης). Σε αυτή την περίπτωση, πρέπει να ορίσετε δύο τιμές: οριζόντια και κάθετα:
Το χαρακτηριστικό μεγέθους φόντου
Μερικές φορές χρειάζεται να χρησιμοποιήσετε το CSS για να τεντώσετε το φόντο ήμείωση του μεγέθους του. Για να γίνει αυτό, χρησιμοποιήστε το μέγεθος φόντου χαρακτηριστικού και το μέγεθος του φόντου μπορεί να καθοριστεί σε pixel ή σε ποσοστά και σε οποιεσδήποτε άλλες μονάδες μέτρησης.
Υπάρχουν ορισμένα προβλήματα με αυτό το χαρακτηριστικό: Για να εμφανίσετε σωστά το φόντο σε παλαιότερες εκδόσεις προγραμμάτων περιήγησης, πρέπει να χρησιμοποιήσετε προθέματα. Φυσικά, οι τρέχουσες εκδόσεις υποστηρίζουν πλήρως αυτό το χαρακτηριστικό και η ανάγκη για συγκεκριμένες ιδιότητες έχει εξαφανιστεί.
Το χαρακτηριστικό προσάρτησης φόντου
Αυτό το χαρακτηριστικό καθορίζει τη συμπεριφορά της εικόνας φόντου κατά την κύλιση. Έτσι, μπορεί να πάρει 3 τιμές (χωρίς να ληφθεί υπόψη η κληρονομιά, κοινή σε όλα τα χαρακτηριστικά που παρουσιάζονται σε αυτό το άρθρο):
- σταθερή - δημιουργεί μια εικόνα ενάντια σε ένα παραπέρα φόντο,
- μετακινηθείτε - το φόντο περιστρέφεται μαζί με τα υπόλοιπα στοιχεία.
- τοπικά - η εικόνα στο παρασκήνιο μετακινείται εάν το κύλινδρο έχει περιεχόμενο. Ένα φόντο που ξεπερνά τα περιεχόμενα είναι σταθερό.
Παράδειγμα χρήσης:
body {fixed-background attachment}.
Επί του παρόντος, ο Firefox δεν υποστηρίζει την τελευταία ιδιότητα (τοπική).
Το χαρακτηριστικό προέλευσης
Αυτό το χαρακτηριστικό είναι υπεύθυνο για την τοποθέτηση του στοιχείου. Οι φυλλομετρητές των πρώιμων εκδόσεων απαιτούν τη χρήση προθεμάτων. Το ίδιο το ακίνητο έχει τρεις παραμέτρους:
- padding-box τοποθετεί το φόντο σε σχέση με την άκρη, λαμβάνοντας υπόψη το πάχος του πλαισίου.
- πλαίσιο διαφέρει από την προηγούμενη ιδιότητα στο ότι η γραμμή ορίου μπορεί να καλύψει πλήρως ή μερικώς το φόντο.
- περιεχόμενο-πλαίσιο τοποθετήστε την εικόνα, τραβώντας την προς το περιεχόμενο.
Εάν καθορίζονται πολλές τιμές, τότε τα προγράμματα περιήγησης μπορούν να αντιδράσουν με τον δικό τους τρόπο: Οι Firefox και Opera αντιλαμβάνονται μόνο την πρώτη επιλογή.
Το χαρακτηριστικό επανάληψης υποβάθρου
Κατά κανόνα, εάν το φόντο καθορίζεται από την εικόνα, αυτόπρέπει να επαναλαμβάνονται οριζόντια ή κάθετα. Για αυτό, χρησιμοποιείται το χαρακτηριστικό επαναλαμβανόμενου υποβάθρου. Επομένως, το φόντο ενός μπλοκ του οποίου το CSS περιέχει μια τέτοια ιδιότητα μπορεί να έχει μία από τις παρακάτω παραμέτρους:
- χωρίς επανάληψη - η εικόνα εμφανίζεται στη σελίδα σε μία παραλλαγή.
- επαναλάβετε - το φόντο επαναλαμβάνεται κατά μήκος των αξόνων x και y,
- επαναλάβω-χ - μόνο οριζόντια.
- επαναλάβετε-y - μόνο κατακόρυφα.
- χώρο - το φόντο επαναλαμβάνεται, αλλά εάν δεν μπορεί να γεμίσει χώρος, εμφανίζονται εικόνες μεταξύ των εικόνων.
- στρογγυλή - Η εικόνα έχει κλιμακωθεί εάν δεν μπορείτε να γεμίσετε ολόκληρη την περιοχή με ολόκληρες φωτογραφίες.
Παράδειγμα χρήσης ενός χαρακτηριστικού:
σώμα {επανάληψη υποβάθρου: επανάληψη χωρίς επανάληψη} - ομοίως αναπαράσταση φόντου: επανάληψη-y.
Το χαρακτηριστικό κλιπ παρασκηνίου
Αυτή η ιδιότητα ορίζει τη συμπεριφορά φόντου κάτω από τα όρια (για παράδειγμα, στην περίπτωση διακεκομμένων πλαισίων):
- padding-box - το φόντο εμφανίζεται αυστηρά στο μπλοκ.
- πλαίσιο - Η εικόνα έρχεται κάτω από το πλαίσιο.
- περιεχόμενο-πλαίσιο - η εικόνα στο παρασκήνιο εμφανίζεται μόνο μέσα στο περιεχόμενο.
Παράδειγμα χρήσης:
σώμα {clip-clip: content-box}.
Το Chrom και το Safari απαιτούν τη χρήση του προθέματος -webkit.
Τα χαρακτηριστικά αδιαφάνειας και φίλτρου
Το χαρακτηριστικό opacity σας επιτρέπει να ορίσετε διαφάνειαbackground - Η ιδιότητα CSS θα λειτουργεί σε όλα τα προγράμματα περιήγησης. Η τιμή ορίζεται από 0,0 έως 1,0 συμπεριλαμβανομένου. Με αυτόν τον τρόπο, μπορείτε να ρυθμίσετε τη διαφάνεια του φόντου CSS χωρίς μια ακέραια τιμή: αντί για 0,3 αρκεί να γράψουμε .3:
.block {φόντο-εικόνα: url (img.png); αδιαφάνεια: .3;}.
Για να ορίσετε τη διαφάνεια φόντου, η CSS της οποίας είναι κατάλληλη ακόμα και για το IE κάτω από την ένατη έκδοση, χρησιμοποιήστε το χαρακτηριστικό φίλτρου:
.block {φόντο-εικόνα: url (img.png); φίλτρο: άλφα (αδιαφάνεια = 30),}.
Σε αυτήν την περίπτωση, η τιμή αδιαφάνειας έχει οριστεί σεαπό 0 έως 100. Σημειώστε ότι το χαρακτηριστικό opacity διαφέρει από τη ρύθμιση διαφάνειας με την κληρονομικότητα του RGBA: όταν χρησιμοποιείται η αδιαφάνεια, όχι μόνο το φόντο γίνεται διαφανές, αλλά όλα τα στοιχεία μέσα στο μπλοκ είναι επίσης διαφανή.
Να παρακολουθείτε πάντα τα στατιστικά στοιχεία χρήσηςπρογράμματα περιήγησης στο CIS και σε όλες τις άλλες χώρες. Το μεγαλύτερο πρόβλημα για όλους τους κατασκευαστές layout είναι η παλιά έκδοση του IE, δεν σας επιτρέπουν να χρησιμοποιήσετε το CSS3 στο έπακρο. Κατά τη δημιουργία διάταξης, μην ξεχάσετε να χρησιμοποιήσετε ειδικές υπηρεσίες που ελέγχουν αν το πρόγραμμα περιήγησης υποστηρίζει οποιαδήποτε ιδιότητα CSS. Εάν δεν μπορείτε να εγκαταστήσετε παλαιότερες εκδόσεις προγραμμάτων περιήγησης, βρείτε μια υπηρεσία που θα ελέγξει τη λειτουργία του ιστότοπου σε διαφορετικά προγράμματα περιήγησης στο διαδίκτυο.
