σύντομες πληροφορίες
Εκδόσεις CSS
Αξίες
url Η τιμή είναι η διαδρομή προς το αρχείο γραφικών, η οποία καθορίζεται μέσα στην κατασκευή url(). Σε αυτήν την περίπτωση, η διαδρομή προς το αρχείο μπορεί να γραφτεί τόσο σε εισαγωγικά (διπλά ή μονό), όσο και χωρίς αυτά. none Ακυρώνει την εικόνα φόντου για το στοιχείο. inherit Κληρονομεί την αξία του γονέα.HTML5 CSS2.1 IE Cr Op Sa Fx
Μοντέλο αντικειμένου
document.getElementById("elementID").style.backgroundImage
Προγράμματα περιήγησης
Internet Explorerμέχρι και συμπεριλαμβανομένης της έκδοσης 7.0 εφαρμόζει ένα φόντο στο εσωτερικό του περιγράμματος ενός στοιχείου που έχει το σύνολο ιδιοτήτων hasLayout. Εάν το στοιχείο δεν έχει hasLayout , η ιδιότητα φόντου-εικόνα θα σέβεται τα όρια του στοιχείου, όπως καθορίζεται στην προδιαγραφή. Η διαφορά στην απόδοση θα είναι αισθητή εάν τα περιγράμματα είναι διακεκομμένα (διακεκομμένα ή διακεκομμένα ) και όχι συμπαγή.
Εάν το στοιχείο έχει οριστεί σε κύλιση ή αυτόματη , ο Internet Explorer 8 θα έχει κατακόρυφη καθυστέρηση ενός εικονοστοιχείου κατά την κύλιση του φόντου.
Ο Internet Explorer έως την έκδοση 7.0 δεν υποστηρίζει την τιμή κληρονομιάς.
Εάν το φόντο έχει οριστεί για μια σειρά πίνακα (ετικέτα
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Αποτέλεσμα αυτό το παράδειγμασε πρόγραμμα περιήγησης Chromeφαίνεται στο σχ. ένας. περιηγητής διαδυκτίουΟι Explorer, Opera και Firefox εμφανίζουν σωστά το φόντο για τη σειρά (Εικ. 2).
Ρύζι. 1. Επαναλάβετε το φόντο για κάθε κελί
Ρύζι. 2. Φόντο για ολόκληρη τη γραμμή
Και εδώ ερχόμαστε στο κύριο πράγμα, ας το επαναδιατυπώσουμε ως εξής: "Ο ιστότοπος ξεκινά από το παρασκήνιο". Οι περισσότεροι bloggers φτιάχνουν «κλασικά blogs» με λευκό φόντο, αλλά θα πάμε από την άλλη. Περπατήστε δίπλα από μια υπέροχη ιδιοκτησία css φόντο-εικόνα, δεν μπορούμε.
Και τι κάνει; Αυτή η ιδιοκτησία css φόντο-εικόναεισάγει μια εικόνα ως φόντο σε διαφορετικά στοιχεία HTML-σελίδες. Δεν περιορίζεται στην ετικέτα. σώμα, και χρησιμοποιείται ευρέως στο σχεδιασμό ιστοτόπων, για παράδειγμα για: div, li, p, πίνακας, κεφαλίδα, υποσέλιδο.
Εξετάστε ένα παράδειγμα:
Ο σχεδιασμός της ιστοσελίδας ξεκινά με το φόντο.
Θα είναι σωστό να ορίσετε το χρώμα του φόντου - ιδιότητας χρώμα του φόντου, για ασφάλιση, αν η εικόνα δεν φορτώνει. σε παρένθεση url()καθορίστε τη διαδρομή προς το φάκελο με τις εικόνες.
Από προεπιλογή, η εικόνα θα επαναλαμβάνεται σαν "πλακάκι" μέχρι να γεμίσει ολόκληρη την οθόνη του προγράμματος περιήγησης, καθώς μετακινούμαστε προς τα κάτω στη σελίδα, το "πλακίδιο" μας θα γεμίσει τόσο τη δεύτερη οθόνη όσο και την τρίτη, αρκεί να τελειώσει το περιεχόμενο της σελίδας . Είναι σαφές ότι ένα τέτοιο αποτέλεσμα δεν είναι η κορυφή της σχεδιαστικής ιδέας και δεν θα έχουμε ένα «μπάνιο», αλλά απλώς ένα blog, όπου η αναγνωσιμότητα είναι ένα πολύ σημαντικό σημείο.
Ένας εύκολος τρόπος για να απαλλαγείτε από το «πλακάκι» είναι να χρησιμοποιήσετε μια μεγάλη εικόνα, πλάτους τουλάχιστον 1024 px, ώστε να γεμίζει ολόκληρη την οθόνη. Θα είναι επίσης καλή απόφασηεύρημα απρόσκοπτη υφή, κατά την αναπαραγωγή του οποίου, η εικόνα θα είναι ενιαία.
Πώς να κάνετε το φόντο πιο ελκυστικό;
Δόξα τω Θεώ έχουμε βοηθούς για αυτό:
- χωρίς επανάληψη- Απενεργοποίηση επανάληψης
- επαναλάβετε x- επανάληψη του μοτίβου μόνο οριζόντια
- επανάληψη-υ- επανάληψη του μοτίβου μόνο κάθετα
Για παράδειγμα:
Κεφαλίδα ιστολογίου
Αυτή είναι μια υφή φόντου που επαναλαμβάνεται μόνο οριζόντια.
Επόμενος Βοηθός - Ακίνητο θέση φόντου, σας επιτρέπει να τοποθετήσετε εικόνα φόντουοπουδήποτε στην οθόνη. Αυτή η προσέγγιση είναι ευρέως διαδεδομένη σε μοντέρνο σχεδιασμό ιστοσελίδων. Έχουμε μια εικόνα, αλλά δεν είναι μέρος του περιεχομένου, αλλά χρησιμεύει μόνο ως διακόσμηση για τον ιστότοπο.
επί κεφαλής
Ένα παράδειγμα μη επαναλαμβανόμενου φόντου με καθορισμένη θέση.
Η εικόνα εμφανίζεται μόνο μία φορά και βρίσκεται στα δεξιά.
Η εσοχή από τη δεξιά άκρη έχει οριστεί στα 200 px για να αποφευχθεί η σύγκρουση του κειμένου στο φόντο.
Εάν θέλουμε η εικόνα να είναι πάντα ορατή κατά την κύλιση της οθόνης προς τα κάτω, πρέπει να προσθέσουμε μια ιδιότητα στον παραπάνω κώδικα - φόντο-συνημμένο: σταθερό;
Ποια είναι η διαφορά μεταξύ imgκαι εικόνα φόντου?
Η διαφορά είναι θεμελιώδης, tag imgεισάγεται απευθείας στο σώμα HTML-σελίδες και είναι υπεύθυνος για το περιεχόμενο (εικόνες, φωτογραφίες, avatars), φέρει σημασιολογικό φορτίο. Είναι πολύ σημαντικό η εικόνα να είναι ευρετηριασμένη μηχανές αναζήτησηςκαι μπήκε μέσα Αποτελέσματα αναζήτησης. Ιδιότητες css φόντο-εικόνα- Κάντε τον ιστότοπο μοναδικό και όμορφο, δηλαδή, αυτό είναι το σχέδιο που πρέπει να μεταφερθεί σε ένα εξωτερικό αρχείο cssστυλ ή χρήση μέσα σε ένα στοιχείο στυλ.
Αυτό βέβαια δεν σημαίνει αυτό εικόνα φόντουδεν θα λειτουργήσει εάν τοποθετηθεί στο σώμα HTML-σελίδες. Αλλά συνιστώ ανεπιφύλακτα να ληφθούν υπόψη όλα όσα σχετίζονται με το σχεδιασμό css. Ως αποτέλεσμα, έχουμε ένα καθαρό HTML-ο κώδικας:
- Αυτό θα επηρεάσει θετικά την ευρετηρίαση του ιστότοπου, τα ρομπότ αναζήτησης θα αγαπήσουν τον ιστότοπό σας και θα τον επισκέπτονται πιο συχνά.
- Οι επισκέπτες σας θα είναι επίσης ικανοποιημένοι, ο ιστότοπος θα φορτώνει πιο γρήγορα λόγω του μικρού βάρους.
- Ως webmaster, είναι πιο εύκολο για εσάς να εργάζεστε με καθαρό κώδικα.
Λοιπόν, έχουμε εξετάσει λίγο πολύ όλες τις επιλογές χρησιμοποιώντας το ακίνητο css φόντο-εικόνα. Περισσότερη πρακτική φίλοι! Μη διστάσετε να αντιγράψετε τον κώδικα και να βρείτε τις δικές σας επιλογές!
Νομίζω ότι δεν υπάρχει ούτε ένας ιστότοπος όπου το ακίνητο δεν θα μπορούσε να χρησιμοποιηθεί css φόντο. Φαίνεται, τι θα μπορούσε να είναι πιο απλό από αυτό το ακίνητο; Αλλά όχι, οι δυνατότητές του είναι πολύ μεγαλύτερες από τη συνηθισμένη ρύθμιση μιας εικόνας ή χρώματος ως φόντο σελίδας. Κάποια θα είναι γνωστά και κάποια θα είναι καινούργια για πολλούς. Σε κάθε περίπτωση, θα είναι χρήσιμο να γνωρίζουμε διεξοδικά πώς λειτουργεί το φόντο.
Το CSS3 έφερε πολλά νέα πράγματα στην ιδιοκτησία, όπως η διαφάνεια και η ρύθμιση πολλαπλών εικόνων ως φόντο, αλλά θα μιλήσουμε για αυτό παρακάτω, αλλά πρώτα θα καλύψουμε τα βασικά της ιδιοκτησίας Ιστορικό.
χρώμα του φόντου
Είμαι σίγουρος ότι έχετε κάνει την αντιστοίχιση χρώματος φόντου πολλές φορές ήδη. Αυτό μπορεί να γίνει χρησιμοποιώντας διάφορους τύπους σημειογραφίας: κανονική (χρησιμοποιείται το όνομα χρώματος), δεκαεξαδική ή RGB σημειογραφία. Κάθε τύπος είναι ισοδύναμος, χρησιμοποιήστε όποιο σας αρέσει περισσότερο. Προσπαθώ να χρησιμοποιήσω τη συντομότερη έκδοση, και για την αντίληψη είναι πιο απλή και το αρχείο στυλ είναι λίγο μικρότερο σε μέγεθος.
P (χρώμα φόντου: κόκκινο;) p (χρώμα φόντου: #f00;) p (χρώμα φόντου: #ff0000;) p (χρώμα φόντου: rgb(255, 0, 0;))
Το CSS3 εισάγει υποστήριξη διαφάνειας, ώστε να μπορούμε να το προσθέσουμε στο χρώμα μας, ως εξής:
P (χρώμα φόντου: rgba(255, 0, 0, 0,5);)
Το τελευταίο ψηφίο ορίζει τη διαφάνεια στο 50%. Μπορείτε να ορίσετε την τιμή διαφάνειας από 0 (πλήρως διάφανο φόντο) έως 1 (πλήρως αδιαφανές).
εικόνα φόντου
Αυτή η ιδιότητα χρησιμοποιείται επίσης πολύ συχνά, σας επιτρέπει να αντιστοιχίσετε μια εικόνα στο φόντο. Το CSS3 προσθέτει τη δυνατότητα αντιστοίχισης πολλαπλών εικόνων σε ένα φόντο, καθεμία από τις οποίες δημιουργεί ένα είδος επιπέδου, έτσι ώστε κάθε επόμενη να επικαλύπτει την προηγούμενη. Γιατί μπορεί αυτό να είναι χρήσιμο; Όλα είναι πολύ απλά - ας πούμε ότι πρέπει να βιδώσετε μικρά πράγματα σε κάθε μία από τις γωνίες του ιστότοπου. Υπό την προϋπόθεση της περισσότερο ή λιγότερο ρευστή διάταξης, η χρήση μιας εικόνας δεν αποτελεί επιλογή. Επομένως, κάνουμε 4 "στρώματα", μετακινούμε κάθε εικόνα στη δική της γωνία και αυτό είναι, το πρόβλημα λύνεται
Κύριο μέρος (εικόνα φόντου: url("image1"), url("image2"), url("image3"))
Εάν πρέπει να αντιστοιχίσετε μία εικόνα στο φόντο, αφήνουμε μόνο την πρώτη στον κώδικα, νομίζω ότι αυτό είναι κατανοητό.
Όταν χρησιμοποιείτε οποιαδήποτε εικόνα ως φόντο, υπάρχουν δύο κανόνες που πρέπει να θυμάστε:
- ορίστε ένα χρώμα φόντου με αντίθεση σε περίπτωση που ο χρήστης δεν δει την εικόνα για κάποιο λόγο. Μπορεί να απενεργοποιήσει τυπικά την εμφάνιση εικόνων, εξοικονομεί κίνηση.
- μην χρησιμοποιείτε εικόνα φόντου για να μεταφέρετε καμία σημαντικές πληροφορίες. Για τον λόγο που αναφέρθηκε παραπάνω, ο χρήστης μπορεί να μην το δει.
Η υποστήριξη για πολλαπλές εικόνες φόντου είναι αρκετά εκτεταμένη. Όλα τα προγράμματα περιήγησης, ακόμη και το IE8, υποστηρίζουν αυτήν την ιδιότητα.
εικόνα φόντου:
Περιγραφή
ιδιοκτησία φόντου-εικόνας(από τα αγγλικά "εικόνα φόντου" - "εικόνα φόντου") ορίζει την εικόνα φόντου ενός στοιχείου.
Σημείωση
Όταν ορίζετε μια εικόνα φόντου, θα πρέπει επίσης να καθορίσετε το χρώμα φόντου που θα χρησιμοποιηθεί εάν η εικόνα δεν είναι διαθέσιμη. Όταν μια εικόνα είναι διαθέσιμη, εμφανίζεται στο χρώμα του φόντου. (Έτσι το χρώμα θα είναι ορατό στα διαφανή μέρη της εικόνας).
Οροι χρήσης
Ξεκινώντας με το CSS3 (χωρίζεται με κόμμα), μπορείτε να καθορίσετε πολλές εικόνες φόντου ταυτόχρονα. Αυτό θα κάνει τις κάτω εικόνες φόντου ορατές μέσα από τις διαφανείς περιοχές των επάνω εικόνων φόντου.
JavaScript
[αντικείμενο] .style .backgroundImage ="[τιμή]";
Υποστήριξη προγράμματος περιήγησης
Προσδιορισμός
Αξίες
Όλες οι τιμές CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Κανένα Καθορίζει ότι δεν υπάρχει εικόνα φόντου. url(
background-image: url(myImage.png );
Url("
background-image: url("myImage.png");
Inherit Καθορίζει ότι το στοιχείο πρέπει να κληρονομεί τις ρυθμίσεις του γονικού στοιχείου.
Αρχική τιμή:"κανένας".
Παράδειγμα χρήσης
Καταχώριση κωδικών
εικόνα φόντου
Ένα έγγραφο με πολλές εικόνες φόντου.
Μοντέλο αντικειμένου
document.getElementById("elementID").style.backgroundImage
Προγράμματα περιήγησης
Ο Internet Explorer μέχρι και την έκδοση 7.0 εφαρμόζει ένα φόντο στο εσωτερικό του περιγράμματος ενός στοιχείου που έχει το σύνολο ιδιοτήτων hasLayout. Εάν το στοιχείο δεν έχει hasLayout , η ιδιότητα φόντου-εικόνα θα σέβεται τα όρια του στοιχείου, όπως καθορίζεται στην προδιαγραφή. Η διαφορά στην απόδοση θα είναι αισθητή εάν τα περιγράμματα είναι διακεκομμένα (διακεκομμένα ή διακεκομμένα ) και όχι συμπαγή.
Εάν το στοιχείο έχει οριστεί σε κύλιση ή αυτόματη , ο Internet Explorer 8 θα έχει κατακόρυφη καθυστέρηση ενός εικονοστοιχείου κατά την κύλιση του φόντου.
Ο Internet Explorer έως την έκδοση 7.0 δεν υποστηρίζει την τιμή κληρονομιάς.
Εάν το φόντο έχει οριστεί για μια σειρά πίνακα (ετικέτα
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Το αποτέλεσμα αυτού του παραδείγματος στο πρόγραμμα περιήγησης Chrome φαίνεται στην Εικ. 1. Το πρόγραμμα περιήγησης Internet Explorer, Opera και Firefox εμφανίζουν σωστά το φόντο για τη γραμμή (Εικ. 2).
Ρύζι. 1. Επαναλάβετε το φόντο για κάθε κελί
Ρύζι. 2. Φόντο για ολόκληρη τη γραμμή