CSS διαφάνεια φόντο. Διαφανές φόντο ή κείμενο με CSS

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

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

Χαρακτηριστικό background-color

Στην CSS, το χρώμα του φόντου μπορεί να ρυθμιστεί με διάφορους τρόπους: χρησιμοποιώντας ένα δεκαεξαδικό κώδικα, το όνομα χρώμα ή RGB είσοδο. Σε CSS3 έγινε δυνατή η χρήση αντί της επιλογής RGB καταγραφής με RGBA.

Hex κώδικα χρώματος καταγράφεται στο ακίνητο μετά το πλέγμα: background-color: # FFDAB9. Αν οι χαρακτήρες σε αυτή την εγγραφή είναι τα ίδια ζεύγη, ο κώδικας αποτελεί συνήθως μια μικρή περικοπή: # ccff00 μπορεί να γραφτεί ως # cf0:

το σώμα {background-color: # cf0 ?}.

Το όνομα είναι, ακόμα και στα πιο εξωτικά χρώματα. Για παράδειγμα, εκτός από το πρότυπο κόκκινο και λευκό μπορείτε να χρησιμοποιήσετε NavajoWhite (#FFDEAD) ή Honeydew2 (# E0EEE0):

το σώμα {background-color: μωβ? }.

Η δεύτερη επιλογή είναι RGB ή τη θέση RGBA σας επιτρέπει να καθορίσετε όχι μόνο το χρώμα αλλά και τη διαφάνεια του φόντου CSS, αλλά η μέθοδος λειτουργεί μόνο σε εκδόσεις IE ηλικίας άνω των 9. Άλλοι browsers αναγνωρίζουν την κανονική έκδοση με διαφάνεια. Σύμφωνα με τα πρότυπα του W3C, είναι προτιμότερο να χρησιμοποιήσετε ακόμα RGBA αντί για το πιο συνηθισμένο RGB.

Η τελευταία τιμή στην RGBA υπόβαθρο και θέτει την αδιαφάνεια από 0 (διαφανές) έως 1 (αδιαφανές).

Υπάρχουν κάποιες ασυνήθιστες τιμές. Το χρώμα του φόντου μπορεί να ρυθμιστεί χρησιμοποιώντας το HSL και Εκθεση Πεπραγμένων. Τόσο προστέθηκαν σε CSS3, και ως εκ τούτου δεν υποστηρίζονται από IE έκδοση 9 ή υψηλότερο. Ενσωματώσεις πανομοιότυπα RGB ή RGBA, μόνο σε μια διαφορετική μορφή: Hue (απόχρωση - τιμή στον τροχό χρωμάτων, δίνεται σε μοίρες), κορεσμένων (κορεσμός - ένταση του χρώματος ως ποσοστό, από 0 έως 100), ελαφρότητα (ελαφρότητα - φωτεινότητα, μετρούμενη παρομοίως παράμετρο Κορεσμός ).

Χαρακτηριστικό φόντο-εικόνα

Η πιο έκδοση cross-browser του διαφανές φόντο - αυτή είναι η χρήση της εικόνας. Σε CSS3, μπορείτε να ορίσετε ακόμη πιο εικόνες, αυτό γίνεται μέσα από ένα κόμμα. παράδειγμα:

{Background-εικόνα του σώματος: url (bg1.png), url (bg2.png)}.

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

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

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

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

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

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

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

Χαρακτηριστικό φόντο-προσκόλληση

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

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

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

σώμα {σταθερό υπόβαθρο-συνημμένο}.

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

Χαρακτηριστικό φόντο προέλευσης

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

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

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

Χαρακτηριστικό φόντο-επαναλαμβάνω

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

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

Παράδειγμα από τα χαρακτηριστικά:

σώμα {υπόβαθρο-επανάληψης: ΝΟ- επανάληψη επανάληψη} - παρόμοιο υπόβαθρο-επανάληψης: επανάληψη-y.

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

Χαρακτηριστικό background-clip

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

• padding-box - φόντο εμφανίζεται στο εσωτερικό του μπλοκ?
• σύνορα-box - η εικόνα έρχεται κάτω από το πλαίσιο?
• περιεχομένου-box - η εικόνα στο φόντο θα εμφανίζονται μόνο στο περιεχόμενο.

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

σώμα {υπόβαθρο-κλιπ: περιεχομένου- κουτί?}.

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

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

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

.block {background-image: url ( img.png)? αδιαφάνεια: .3?}.

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

.block {background-image: url ( img.png)? φίλτρο: άλφα (αδιαφάνεια = 30)}.

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

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