Css φόντου χωρίς επανάληψη. Φόντο σε CSS (χρώμα, θέση, εικόνα, επανάληψη, συνημμένο) - τα πάντα για τη ρύθμιση του χρώματος φόντου ή της εικόνας φόντου των στοιχείων Html. Έλεγχος του μεγέθους της εικόνας φόντου
σύντομες πληροφορίες
Εκδόσεις 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 φαίνεται στην Εικ. 1. Τα προγράμματα περιήγησης Internet Explorer, Opera και Firefox εμφανίζουν σωστά το φόντο για τη γραμμή (Εικ. 2).
Ρύζι. 1. Επαναλάβετε το φόντο για κάθε κελί
Ρύζι. 2. Φόντο για ολόκληρη τη γραμμή
Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θα δούμε πέντε κανόνες CSS που σας επιτρέπουν να ορίσετε ένα φόντο για οποιοδήποτε στοιχείο στο Html - θέση φόντου (εικόνα, επανάληψη, χρώμα, συνημμένο). Λοιπόν, ας μην ξεχάσουμε επίσης να αναφέρουμε τον κανόνα της σύνθεσης του φόντου.
Δεν υπάρχει τίποτα περίπλοκο σε αυτό, αλλά υπάρχουν ορισμένες λεπτές αποχρώσεις και αποχρώσεις που πρέπει να γνωρίζετε για ένα έτοιμο πρότυπο (θυμηθείτε, το οποίο θα σας βοηθήσει να αποκαλύψετε όλες τις λεπτομέρειες οποιουδήποτε σχεδίου).
Επιτρέψτε μου να σας υπενθυμίσω για άλλη μια φορά ότι αυτό το άρθρο είναι μέρος μιας σειράς και θα ήταν καλύτερο να αρχίσετε να μελετάτε τη σήμανση στυλ από την αρχή, δηλαδή με ένα άρθρο σχετικά με το τι είναι το CSS και με τι χρησιμοποιείται, και στη συνέχεια να ακολουθήσετε τη σειρά που δίνεται στο βιβλίο αναφοράς. Αν και, σε κάθε περίπτωση, εξαρτάται από εσάς, αλλά τώρα ας μιλήσουμε για τη ρύθμιση του φόντου.
Χρώμα, χρώμα φόντου και εικόνα φόντου
Ας δούμε πρώτα πώς να ορίσετε το χρώμα των στοιχείων Html χρησιμοποιώντας Κανόνες χρώματος Css. Στην πραγματικότητα, όλα είναι απλά εδώ. Η σύνταξη είναι απολύτως φυσιολογική και μπορείτε να ορίσετε το χρώμα σύμφωνα με το πώς έγινε στη γλώσσα σήμανσης υπερκειμένου. Όπως θυμάστε, τοποθετείται μετά το σύμβολο κατακερματισμού (hash - "#fe35a3"), ή χρησιμοποιώντας τρία ψηφία, εάν το πρώτο συμπίπτει με την τιμή του δεύτερου, το τρίτο με το τέταρτο και το πέμπτο, αντίστοιχα, με το έκτο ( Ο χρωματικός κωδικός "#aa33ff" μπορεί να γραφεί εν συντομία ως "a3f").
Επίσης, τα χρώματα στον κώδικα Html και Css μπορούν να αναπαρασταθούν με τη μορφή λέξεων (για παράδειγμα, "κόκκινο"), αλλά τις περισσότερες φορές είναι ο δεκαεξαδικός κώδικας που χρησιμοποιείται:
Χρώμα:#303
Για παράδειγμα, έβαψα αυτή τη μικρή παράγραφο με το ίδιο χρώμα όπως παραπάνω (#303). Τώρα είναι ελαφρώς διαφορετικό από το χρώμα όλων των άλλων παραγράφων (πιο σκούρο), το οποίο έχει οριστεί σε #555 στο αρχείο CSS του θέματος WordPress που χρησιμοποιώ. Αλλά η ρύθμιση του χρώματος με χρήση χρώματος είναι αρκετά απλή, αλλά με το φόντο θα είναι λίγο πιο περίπλοκο.
Ετσι, για το φόντο στο CssΥπάρχουν πέντε κανόνες που μπορούν να συνδυαστούν σε έναν εάν το επιθυμείτε. Για να τα δείτε, μπορείτε να μεταβείτε στην τρέχουσα σελίδα προδιαγραφών του W3C και να αναζητήσετε οτιδήποτε με τη λέξη Φόντο:
- χρώμα φόντου - χρησιμοποιώντας αυτόν τον κανόνα, ορίζετε το χρώμα φόντου για οποιοδήποτε στοιχείο Html. Μπορείτε να χρησιμοποιήσετε είτε έναν κωδικό είτε το όνομα της απόχρωσης, π.χ. όλα είναι ακριβώς τα ίδια όπως ήταν όταν χρησιμοποιούσαμε χρώμα.
εικόνα φόντου - με αυτό μπορείτε να χρησιμοποιήσετε μια εικόνα ως φόντο (αλλά φροντίστε να διαβάσετε γι 'αυτό, επειδή οι βαριές εικόνες θα επιβραδύνουν τη φόρτωση των σελίδων), η διαδρομή προς την οποία θα υποδεικνύεται στη λειτουργικότητα url ().
Αν κοιτάξετε τις προδιαγραφές θα το δείτε προεπιλεγμένο χρώμα φόντουοποιοδήποτε στοιχείο θα είναι διαφανές (η προεπιλεγμένη τιμή του κανόνα είναι "χρώμα φόντου: διαφανές"). Είναι αλήθεια ότι στα στοιχεία δεν θα είναι διαφανές από προεπιλογή, επειδή Αυτά είναι στοιχεία συστήματος και όλα είναι διαφορετικά με αυτά και διαφέρουν από τις συνηθισμένες ετικέτες γλώσσας σήμανσης υπερκειμένου.
Το χρώμα στο χρώμα φόντου ορίζεται ως τυπικό (έξι ή τρία ψηφία δεκαεξαδικού κώδικα ή μια λέξη):
Χρώμα φόντου:#FEFCDE
Για παράδειγμα, το φόντο αυτής της παραγράφου καθορίζεται χρησιμοποιώντας το χρώμα φόντου με τον κωδικό χρώματος που δίνεται ακριβώς παραπάνω.
Και οι άλλοι τέσσερις κανόνες CSS θα αφορούν μόνο την εικόνα φόντου, η οποία μπορεί να ρυθμιστεί για οποιοδήποτε στοιχείο Html και, εάν είναι επιθυμητό, να τοποθετηθεί με ακρίβεια. Ποιο αρχείο γραφικών θα χρησιμοποιηθεί μπορεί να καθοριστεί χρησιμοποιώντας εικόνα φόντου.
Αν κοιτάξετε την προδιαγραφή γλώσσας σήμανσης, θα δείτε ότι η εικόνα φόντου είναι προεπιλεγμένη σε "κανένα" (δηλαδή, δεν χρησιμοποιείται εικόνα για το φόντο). Λοιπόν, αν εξακολουθείτε να χρειάζεστε αυτό, τότε στη λειτουργικότητα url() θα χρειαστεί να υποδείξετε τη διαδρομή προς αυτήν:
Background-image:url(https://site/image/comment_top_focus.gif);
Για παράδειγμα, για αυτήν την παράγραφο χρησιμοποίησα ένα αρχείο γραφικών με φόντο, η διαδρομή προς το οποίο περιγράφεται ακριβώς παραπάνω. Βλέπετε ότι ολόκληρη η περιοχή που διατίθεται για αυτήν την παράγραφο καλύπτεται με μια επαναλαμβανόμενη εικόνα, η οποία στο πρωτότυπο μοιάζει με αυτό:
Εκείνοι. όταν χρησιμοποιείται μόνο ένας κανόνας εικόνας φόντου που υποδεικνύει τη διαδρομή προς το αρχείο γραφικών, αυτή η ίδια εικόνα θα πολλαπλασιαστεί τόσο κατακόρυφα όσο και οριζόντια έως ότου καλύψει ολόκληρη την περιοχή που έχει εκχωρηθεί στην ιστοσελίδα για αυτό το συγκεκριμένο στοιχείο Html (στο παράδειγμα μας ήταν μία παράγραφος). Γιατί συμβαίνει αυτό;
Background-repeat - επαναλάβετε την εικόνα φόντου
Ναι, επειδή δεν καθορίσαμε καμία τιμή για τον κανόνα CSS φόντο-επανάληψη, πράγμα που σημαίνει ότι θα χρησιμοποιηθεί η προεπιλεγμένη τιμή για αυτό. Εξετάζοντας τις προδιαγραφές, διαπιστώνουμε ότι αυτή η τιμή αντιστοιχεί στο "repeat" (επαναλάβετε την εικόνα σε όλους τους άξονες). Η απάντηση ήρθε φυσικά.
Επομένως, με το background-repeat μπορούμε διαχείριση επαναλήψεων εικόνων φόντου. Αυτός ο κανόνας μπορεί να έχει μόνο τέσσερις έννοιες:
Θέση φόντου - τοποθέτηση φόντου
Τώρα τίθεται το ερώτημα: είναι δυνατόν να μετακινήσετε την εικόνα φόντου μακριά από την επάνω αριστερή γωνία της περιοχής περιορίζοντας το μέγεθος του στοιχείου. Φυσικά και μπορείς, και υπάρχει ξεχωριστός κανόνας για αυτό το σκοπό. φόντο-θέση:
Εξετάζοντας την προδιαγραφή CSS, γίνεται σαφές γιατί η εικόνα φόντου από προεπιλογή πιέζεται ακριβώς στην επάνω αριστερή άκρη της περιοχής στοιχείων Html. Επειδή η τιμή "0% 0%" είναι η προεπιλεγμένη τιμή για τον κανόνα θέσης φόντου.
Λοιπόν, όταν αυτός ο κανόνας δεν ορίζεται ρητά για ένα στοιχείο (όπως στην περίπτωσή μας), τότε το πρόγραμμα περιήγησης επιλέγει την τιμή του, η οποία είναι αποδεκτή στην προδιαγραφή από προεπιλογή (σημειώστε ότι οι άξονες συντεταγμένων στο CSS αναφέρονται ακριβώς από την επάνω αριστερή άκρη του στοιχείου της περιοχής).
Είναι επίσης σαφές από την προδιαγραφή ότι για να τοποθετήσετε την εικόνα φόντου χρησιμοποιώντας τη θέση φόντου, μπορείτε να χρησιμοποιήσετε και σχετικές (ποσοστά) και απόλυτες τιμές (για παράδειγμα, ). Λοιπόν, μπορείτε επίσης να χρησιμοποιήσετε λέξεις που θα αντιστοιχούν σε ορισμένες ψηφιακές τιμές. Πρώτα όμως πρώτα.
Όταν ρυθμίζετε τη θέση της εικόνας φόντου χρησιμοποιώντας απόλυτες μονάδεςστη θέση φόντου χρησιμοποιείται η ακόλουθη αρχή για τον προσδιορισμό της τελικής του θέσης:
Εκείνοι. το πρόγραμμα περιήγησης θα υπολογίσει τις καθορισμένες μετατοπίσεις κατά μήκος των αξόνων X και Y από την αρχή της περιοχής στην οποία είναι τοποθετημένο το αντικείμενο μέχρι την αρχή αυτής της ίδιας της εικόνας. Για παράδειγμα, σε αυτήν την παράγραφο τοποθέτησα την εικόνα φόντου μέσω της θέσης φόντου χρησιμοποιώντας τους ακόλουθους κανόνες CSS:
Background-image:url(https://site/image/logo.png); background-repeat:no-repeat; background-position:400px 25px;
Λάβετε υπόψη ότι σε αυτήν την περίπτωση θα ευθυγραμμιστεί στο κέντρο της περιοχής προβολής και όχι στο κέντρο της περιοχής που έχει εκχωρηθεί για αυτές τις παραγράφους. Είναι σαφές ότι στην πραγματικότητα μια τέτοια τοποθέτηση μιας εικόνας φόντου είναι απίθανο να χρησιμοποιηθεί.
Ωστόσο, εάν ορίσετε μια σταθερή θέση φόντου για στοιχεία όπως Body ή Html (δηλαδή σε ετικέτες που καλύπτουν ολόκληρη την ιστοσελίδα), τότε αυτή η εικόνα θα είναι πάντα ορατή στη θύρα προβολής και αυτή ακριβώς είναι η χρήση του συνημμένου φόντου CSS ιδιοκτησία σε μοντέρνα διάταξη μπλοκ.
Υπάρχει κάποιο άλλο προκατασκευασμένος κανόνας Φόντο, το οποίο σας επιτρέπει να συνδυάσετε και τους πέντε κανόνες που περιγράφονται παραπάνω σε ένα μπουκάλι. Επιπλέον, οι τιμές και για τα πέντε στη συνδυασμένη έκδοση μπορούν να χρησιμοποιηθούν με οποιαδήποτε σειρά και σε οποιαδήποτε ποσότητα (είναι μοναδικές και το πρόγραμμα περιήγησης δεν θα τις μπερδέψει μεταξύ τους). Οτιδήποτε δεν προσδιορίζετε ρητά θα θεωρείται από το πρόγραμμα περιήγησης ως η προεπιλεγμένη τιμή.
Png) μη επανάληψη 50%;
Ο κανόνας του παραδείγματος προκατασκευής εφαρμόζεται σε αυτήν την παράγραφο για λόγους σαφήνειας. Δεν βγήκε όμορφο, αλλά δεν είναι αυτό το κύριο πράγμα. Αυτή η παράγραφος χρησιμοποιεί ένα περίεργο κίτρινο γέμισμα φόντου και χρησιμοποιεί επίσης μια εικόνα του λογότυπου Liveinternet, στοιχισμένη στο κέντρο της παραγράφου. Επειδή Εάν δεν δοθεί καμία τιμή στον κανόνα επισύναψης φόντου, τότε χρησιμοποιείται η τιμή κύλισης (η προεπιλογή).
Εάν για κάποιο στοιχείο θέλετε να ορίσετε μόνο ένα χρωματικό γέμισμα και να μην ενοχλείτε με μια εικόνα φόντου, τότε μπορείτε να το κάνετε αυτό:
Χρώμα φόντου:#FEFCDE
γράφω:
Ιστορικό:#FEFCDE
Επειδή όλες οι άλλες τιμές του κανόνα προκατασκευής θα λαμβάνονται από προεπιλογή, και αυτό είναι που χρειαζόσασταν.
Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου
Μπορεί να σας ενδιαφέρει
Στυλ λίστας (τύπος, εικόνα, θέση) - Κανόνες Css για την προσαρμογή της εμφάνισης λιστών σε κώδικα Html Τρόπος διαμόρφωσης του εναλλασσόμενου χρώματος φόντου σειρών πινάκων, λιστών και άλλων στοιχείων Html στον ιστότοπο χρησιμοποιώντας την ψευδο-κλάση nth-child 
Θέση (απόλυτη, σχετική και σταθερή) - τρόποι τοποθέτησης στοιχείων Html στο CSS (κανόνες αριστερά, δεξιά, πάνω και κάτω) 
Float and clear in CSS - block layout tools 
Τοποθέτηση χρησιμοποιώντας τον κανόνα Z-index και CSS Cursor για την αλλαγή του δρομέα του ποντικιού 
Επένδυση, Περιθώριο και Περιθώριο - ορίστε εσωτερική και εξωτερική επένδυση στο CSS, καθώς και περιγράμματα για όλες τις πλευρές (πάνω, κάτω, αριστερά, δεξιά) 
Εμφάνιση (μπλοκ, κανένα, ενσωματωμένο) σε CSS - ορίστε τον τύπο εμφάνισης των στοιχείων Html στην ιστοσελίδα 
Προτεραιότητες σε Css και αύξησή τους λόγω Σημαντικό, συνδυασμός και ομαδοποίησης επιλογέων, στυλ χρήστη και συγγραφέα 
CSS - τι είναι, πώς συνδέονται τα φύλλα στυλ με κλιμάκωση με κώδικα Html χρησιμοποιώντας Στυλ και Σύνδεσμο 
Επιλογείς ετικετών, κλάσεων, αναγνωριστικού και γενικής χρήσης, καθώς και επιλογείς χαρακτηριστικών στο σύγχρονο 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, υποστηρίζουν αυτήν την ιδιότητα.
Από τον συγγραφέα:Γεια σε όλους. Τα χρώματα φόντου και οι εικόνες παίζουν τεράστιο ρόλο στη σχεδίαση ιστοσελίδων, καθώς σας επιτρέπουν να σχεδιάζετε πιο ελκυστικά οποιαδήποτε στοιχεία. Σήμερα θα δούμε πώς να δημιουργήσουμε ένα φόντο σε HTML.
Είναι δυνατόν να χρησιμοποιήσετε HTML για να ορίσετε το φόντο;
Θα πω αμέσως ότι όχι. Γενικά, η html δεν δημιουργήθηκε για να σχεδιάζει ιστοσελίδες. Απλώς είναι πολύ άβολο. Για παράδειγμα, υπάρχει ένα χαρακτηριστικό bgcolor, με το οποίο μπορείτε να ορίσετε το χρώμα φόντου, αλλά αυτό είναι πολύ ενοχλητικό.
Αντίστοιχα, θα χρησιμοποιήσουμε Cascading Style Sheets (CSS). Υπάρχουν πολύ περισσότερες ευκαιρίες για τη δημιουργία φόντου. Σήμερα θα δούμε τα πιο βασικά.
Πώς να ορίσετε ένα φόντο χρησιμοποιώντας css;
Επομένως, πρώτα απ 'όλα, πρέπει να αποφασίσετε σε ποιο στοιχείο θέλετε να ορίσετε το φόντο. Δηλαδή, πρέπει να βρούμε έναν επιλογέα στον οποίο θα γράψουμε έναν κανόνα. Για παράδειγμα, εάν χρειάζεται να ορίσετε το φόντο για ολόκληρη τη σελίδα ως σύνολο, μπορείτε να το κάνετε μέσω του επιλογέα σώματος και για όλα τα μπλοκ μέσω του επιλογέα div. Λοιπόν, κλπ. Το φόντο μπορεί και πρέπει να συνδεθεί με οποιονδήποτε άλλο επιλογέα: κλάσεις στυλ, αναγνωριστικά κ.λπ.
Αφού αποφασίσετε για τον επιλογέα, πρέπει να γράψετε το ίδιο το όνομα του ακινήτου. Για να ορίσετε το χρώμα φόντου (δηλαδή ένα συμπαγές χρώμα, όχι μια κλίση ή μια εικόνα), χρησιμοποιήστε την ιδιότητα χρώματος φόντου. Μετά από αυτό πρέπει να βάλετε μια άνω τελεία και να γράψετε το ίδιο το χρώμα. Αυτό μπορεί να γίνει με διάφορους τρόπους. Για παράδειγμα, χρησιμοποιώντας λέξεις-κλειδιά, δεκαεξαδικό κώδικα, μορφές rgb, rgba, hsl. Οποιαδήποτε μέθοδος θα κάνει.
Η πιο συχνά χρησιμοποιούμενη μέθοδος είναι ο δεκαεξαδικός κώδικας. Για να επιλέξετε χρώματα, μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα που εμφανίζει τον κωδικό χρώματος. Για παράδειγμα, photoshop, paint ή κάποιο διαδικτυακό εργαλείο. Αντίστοιχα, ως παράδειγμα, θα γράψω ένα γενικό υπόβαθρο για ολόκληρη την ιστοσελίδα.
σώμα (χρώμα φόντου: #D4E6B3; )
Αυτός ο κωδικός πρέπει να εισαχθεί στο τμήμα κεφαλής. Είναι σημαντικό τα αρχεία να βρίσκονται στον ίδιο φάκελο.
Εικόνα ως φόντο
Για την εικόνα θα χρησιμοποιήσω ένα μικρό εικονίδιο γλώσσας html:
Ας δημιουργήσουμε ένα κενό μπλοκ με ένα αναγνωριστικό:
< div id = "bg" > < / div > |
Ας του δώσουμε σαφείς διαστάσεις και φόντο:
#bg(πλάτος: 400 εικονοστοιχεία; ύψος: 250 εικονοστοιχεία; εικόνα φόντου: url(html.png); )
#bg( πλάτος: 400 px; ύψος: 250 px; φόντο - εικόνα : url (html . png ) ; |
Από αυτόν τον κωδικό μπορείτε να δείτε ότι χρησιμοποίησα μια νέα ιδιότητα - background-image. Προορίζεται ειδικά για την εισαγωγή μιας εικόνας ως φόντου σε ένα στοιχείο html. Ας δούμε τι έγινε:
Για να καθορίσετε μια εικόνα, πρέπει να γράψετε τη λέξη-κλειδί url μετά την άνω και κάτω τελεία και, στη συνέχεια, να υποδείξετε τη διαδρομή προς το αρχείο σε παρένθεση. Σε αυτήν την περίπτωση, η διαδρομή καθορίζεται με βάση το γεγονός ότι η εικόνα βρίσκεται στον ίδιο φάκελο με το έγγραφο html. Πρέπει επίσης να καθορίσετε τη μορφή εικόνας.
Εάν το έχετε κάνει και το φόντο δεν εμφανίζεται ακόμα στο μπλοκ, ελέγξτε ξανά εάν γράψατε σωστά το όνομα της εικόνας, εάν η διαδρομή και η επέκταση έχουν οριστεί σωστά. Αυτοί είναι οι πιο συνηθισμένοι λόγοι για τους οποίους το φόντο απλώς δεν εμφανίζεται επειδή το πρόγραμμα περιήγησης δεν μπορεί να βρει την εικόνα.
Παρατήρησες όμως ένα πράγμα; Το πρόγραμμα περιήγησης πήρε και πολλαπλασίασε την εικόνα σε όλο το μπλοκ. Έτσι, για να ξέρετε, αυτή είναι η προεπιλεγμένη συμπεριφορά των εικόνων φόντου - επαναλαμβάνονται κάθετα και οριζόντια, εφόσον μπορούν να χωρέσουν στο μπλοκ. Με αυτή τη συμπεριφορά μπορείτε εύκολα να ελέγξετε. Για να το κάνετε αυτό, χρησιμοποιήστε την ιδιότητα background-repeat, η οποία έχει 4 κύριες τιμές:
Repeat – προεπιλεγμένη τιμή, η εικόνα επαναλαμβάνεται και στις δύο πλευρές.
Repeat-x – επαναλαμβάνεται μόνο στον άξονα x.
Repeat-y – επαναλαμβάνεται μόνο κατά μήκος του άξονα y.
Χωρίς επανάληψη – δεν επαναλαμβάνεται καθόλου.
Μπορείτε να γράψετε κάθε τιμή και να δείτε τι συμβαίνει. Θα το γράψω ως εξής:
background-repeat: repeat-x;
φόντο - επανάληψη : επανάληψη - x ; |
Τώρα επαναλάβετε μόνο οριζόντια. Εάν ρυθμίσετε τη μη επανάληψη, τότε θα υπάρχει μόνο μία εικόνα.
Τέλεια, μπορούμε να τελειώσουμε εδώ, καθώς αυτές είναι οι βασικές δυνατότητες εργασίας με το φόντο, αλλά θα σας δείξω 2 ακόμη ιδιότητες που σας επιτρέπουν να αποκτήσετε περισσότερο έλεγχο.
Μέσω της επανάληψης, οι σχεδιαστές διάταξης συνήθιζαν να δημιουργούν υφές φόντου και διαβαθμίσεις χρησιμοποιώντας μια μικροσκοπική εικόνα. Θα μπορούσε να είναι 30 επί 10 pixel ή ακόμα και μικρότερο. Ή ίσως λίγο περισσότερο. Η εικόνα ήταν τέτοια που όταν επαναλαμβανόταν στη μία ή και στις δύο πλευρές, δεν φαινόταν καμία μετάβαση, οπότε το αποτέλεσμα ήταν ένα ενιαίο, χωρίς ραφή φόντο. Παρεμπιπτόντως, αυτή η προσέγγιση αξίζει να χρησιμοποιήσετε τώρα εάν θέλετε να χρησιμοποιήσετε μια απρόσκοπτη υφή στον ιστότοπό σας ως φόντο. Σήμερα, μια διαβάθμιση μπορεί ήδη να εφαρμοστεί χρησιμοποιώντας μεθόδους css3, σίγουρα θα μιλήσουμε για αυτό αργότερα.
Θέση φόντου
Από προεπιλογή, η εικόνα φόντου, εκτός εάν έχει ρυθμιστεί να επαναλαμβάνεται, θα βρίσκεται στην επάνω αριστερή γωνία του μπλοκ της. Αλλά η θέση μπορεί εύκολα να αλλάξει χρησιμοποιώντας την ιδιότητα φόντου-θέση.
Μπορείτε να το ρυθμίσετε με διαφορετικούς τρόπους. Μια επιλογή είναι να υποδείξετε απλώς τις πλευρές στις οποίες πρέπει να βρίσκεται η εικόνα:
φόντο-θέση: πάνω δεξιά.
φόντο-θέση: πάνω δεξιά; |
Δηλαδή, κάθετα όλα παραμένουν ίδια: η εικόνα φόντου βρίσκεται στην κορυφή, αλλά οριζόντια αλλάξαμε την πλευρά προς τα δεξιά, δηλαδή δεξιά. Ένας άλλος τρόπος για να ορίσετε μια θέση είναι ως ποσοστό. Σε αυτή την περίπτωση, η αντίστροφη μέτρηση ξεκινά σε κάθε περίπτωση από την επάνω αριστερή γωνία. 100% - ολόκληρο το μπλοκ. Έτσι, για να τοποθετήσουμε την εικόνα ακριβώς στο κέντρο, τη γράφουμε ως εξής:
φόντο-θέση: 50% 50%;
φόντο-θέση: 50% 50%; |
Θυμηθείτε ένα σημαντικό πράγμα σχετικά με την τοποθέτηση - η πρώτη παράμετρος είναι πάντα η οριζόντια θέση και η δεύτερη είναι η κατακόρυφη θέση. Έτσι, αν δείτε μια τιμή 80% 20%, τότε μπορείτε αμέσως να συμπεράνετε ότι η εικόνα φόντου θα μετατοπιστεί πολύ προς τα δεξιά, αλλά δεν θα μειωθεί πολύ.
Και τέλος, μπορείτε να καθορίσετε τη θέση σε pixel. Όλα είναι ίδια, μόνο αντί για % θα υπάρχει px. Σε ορισμένες περιπτώσεις, μια τέτοια τοποθέτηση μπορεί να είναι απαραίτητη.
Σύντομη σημειογραφία
Συμφωνήστε ότι ο κώδικας αποδεικνύεται αρκετά δυσκίνητος εάν όλα έχουν ρυθμιστεί όπως τα κάναμε. Αποδεικνύεται ότι πρέπει να καθοριστεί η διαδρομή προς την εικόνα, η επανάληψη και η θέση. Φυσικά, η επανάληψη και η θέση δεν είναι πάντα απαραίτητες, αλλά σε κάθε περίπτωση, θα ήταν πιο σωστό να χρησιμοποιήσετε μια συντομογραφία για το ακίνητο. Μοιάζει με αυτό:
φόντο: #333 url(bg.jpg) μη επανάληψη 50% 50%;
Ιστορικό: #333 url(bg.jpg) μη επανάληψη 50% 50%; |
Δηλαδή, το πρώτο βήμα είναι να καταγράψετε το συνολικό συμπαγές χρώμα φόντου, εάν είναι απαραίτητο. Στη συνέχεια η διαδρομή προς την εικόνα, η επανάληψη και η θέση. Εάν κάποια παράμετρος δεν χρειάζεται, τότε απλώς παραλείψτε την. Συμφωνώ, αυτό είναι πολύ πιο γρήγορο και πιο βολικό, και επίσης μειώνουμε σημαντικά τον κωδικό μας. Σε γενικές γραμμές, σας συμβουλεύω να γράφετε πάντα σε συντομογραφία, ακόμα κι αν χρειάζεται μόνο να υποδείξετε ένα χρώμα ή μια εικόνα.
Έλεγχος του μεγέθους της εικόνας φόντου
Η τρέχουσα εικόνα μας δεν είναι πολύ καλή για να δείξουμε το επόμενο κόλπο, οπότε θα πάρω άλλο ένα. Αφήστε το να έχει το μέγεθος ενός μπλοκ ή μεγαλύτερο. Φανταστείτε λοιπόν ότι αντιμετωπίζετε το καθήκον να δημιουργήσετε μια εικόνα φόντου έτσι ώστε να μην γεμίζει πλήρως το μπλοκ της. Και η εικόνα, για παράδειγμα, είναι ακόμη μεγαλύτερη από το μέγεθος του μπλοκ.
Τι μπορείτε να κάνετε σε αυτή την περίπτωση; Φυσικά, η απλούστερη και πιο λογική επιλογή θα ήταν απλώς να μειώσετε την εικόνα, αλλά δεν είναι πάντα δυνατό να το κάνετε αυτό. Ας πούμε ότι είναι στον διακομιστή και αυτή τη στιγμή δεν υπάρχει χρόνος ή ευκαιρία για μείωση. Το πρόβλημα μπορεί να λυθεί χρησιμοποιώντας την ιδιότητα background-size, η οποία μπορεί να ονομαστεί σχετικά νέα και η οποία σας επιτρέπει να χειριστείτε το μέγεθος της εικόνας φόντου, και μάλιστα οποιουδήποτε φόντου.
Έτσι, η εικόνα μου καταλαμβάνει τώρα όλο το χώρο στο μπλοκ, αλλά θα της δώσω ένα μέγεθος φόντου:
Μέγεθος φόντου: 80% 50%;
Μέγεθος φόντου: 80% 50%; |
Και πάλι, η πρώτη παράμετρος ορίζει το οριζόντιο μέγεθος, η δεύτερη - το κατακόρυφο μέγεθος. Βλέπουμε ότι όλα εφαρμόστηκαν σωστά - η φωτογραφία έγινε το 80% του πλάτους του μπλοκ σε πλάτος και το μισό σε ύψος. Εδώ πρέπει απλώς να κάνετε μια διευκρίνιση - ορίζοντας το μέγεθος ως ποσοστό, μπορείτε να επηρεάσετε τις αναλογίες της εικόνας. Προσοχή λοιπόν αν θέλετε να μην ανατρέψετε τις αναλογίες.
Όπως μπορείτε να μαντέψετε, το μέγεθος του φόντου μπορεί επίσης να καθοριστεί σε pixel. Υπάρχουν δύο ακόμη λέξεις-κλειδιά που μπορούν επίσης να χρησιμοποιηθούν:
Εξώφυλλο – η εικόνα θα κλιμακωθεί έτσι ώστε τουλάχιστον στη μία πλευρά να γεμίζει πλήρως το μπλοκ.
Contain – κλιμακώστε το έτσι ώστε η εικόνα να χωράει πλήρως στο μπλοκ στο μέγιστο μέγεθός του.
Το πλεονέκτημα αυτών των τιμών είναι ότι δεν αλλάζουν τις αναλογίες της εικόνας, αφήνοντάς τις ίδιες.
Θα πρέπει επίσης να καταλάβετε ότι το τέντωμα της εικόνας μπορεί να οδηγήσει σε υποβάθμιση της ποιότητάς της. Μπορώ να δώσω ένα παράδειγμα από τη ζωή και την πραγματική πρακτική των σχεδιαστών layout. Όλοι γνωρίζουν και καταλαβαίνουν ότι όταν σχεδιάζετε για επιτραπέζιους υπολογιστές, πρέπει να προσαρμόσετε τον ιστότοπο στα πλάτη της κύριας οθόνης: 1280, 1366, 1920. Εάν τραβήξετε μια εικόνα φόντου με μέγεθος, ας πούμε, 1280 επί 200 και δεν τη δώσετε ένα μέγεθος φόντου και μετά οθόνες με μεγαλύτερο πλάτος Θα εμφανιστεί ένας κενός χώρος, η εικόνα δεν θα γεμίσει πλήρως το πλάτος.
Στο 99% των περιπτώσεων, αυτό δεν ταιριάζει στον προγραμματιστή ιστού, επομένως ορίζει το μέγεθος φόντου: εξώφυλλο έτσι ώστε η εικόνα να εκτείνεται πάντα στο μέγιστο πλάτος του παραθύρου. Αυτή είναι μια καλή τεχνική για χρήση, αλλά τώρα θα αντιμετωπίσετε το πρόβλημα ότι οι χρήστες με πλάτος οθόνης 1920 pixel μπορεί να δουν μια υποβέλτιστη ποιότητα εικόνας.
Να σας υπενθυμίσω, θα τεντωθεί στο μέγιστο πλάτος του. Κατά συνέπεια, η ποιότητα θα επιδεινωθεί αυτόματα. Η μόνη σωστή λύση εδώ θα ήταν να χρησιμοποιήσετε αρχικά μια μεγαλύτερη εικόνα – πλάτους 1920 pixel. Στη συνέχεια, στις πιο φαρδιές οθόνες θα είναι στο φυσικό της μέγεθος και σε άλλες απλά θα αποκοπεί σταδιακά, αλλά ταυτόχρονα, εάν η εικόνα φόντου είναι σωστά επιλεγμένη, αυτό δεν θα επηρεάσει την εμφάνιση του ιστότοπου.
Σε γενικές γραμμές, αυτό είναι μόνο 1 παράδειγμα για το πώς να χρησιμοποιήσετε τις γνώσεις που αποκτήσατε σε αυτό το άρθρο κατά τη διαμόρφωση πραγματικών διατάξεων.
Ημιδιαφανές φόντο με χρήση css
Ένα άλλο χαρακτηριστικό που μπορεί να εφαρμοστεί χρησιμοποιώντας css είναι ένα ημιδιαφανές φόντο. Δηλαδή, μέσα από αυτό το υπόβαθρο θα είναι δυνατό να δούμε τι κρύβεται πίσω από αυτό.
Ως παράδειγμα, θα ορίσω ολόκληρη τη σελίδα ως φόντο στην εικόνα που χρησιμοποιήσαμε νωρίτερα στα παραδείγματα. Για το μπλοκ με αναγνωριστικό bg, στο οποίο διεξάγουμε όλα τα πειράματά μας, θα ορίσουμε το φόντο χρησιμοποιώντας τη μορφή ρύθμισης χρώματος rgba.
Όπως είπα νωρίτερα, υπάρχουν πολλές μορφές για τη ρύθμιση των χρωμάτων στο CSS. Ένα από αυτά είναι το rgb, μια αρκετά γνωστή μορφή για όσους εργάζονται σε γραφικούς επεξεργαστές. Είναι γραμμένο ως εξής: rgb(17, 255, 34);
Η πρώτη τιμή στις αγκύλες είναι ο κορεσμός του κόκκινου, μετά πράσινου και μετά μπλε. Η τιμή μπορεί να είναι αριθμητική από 0 έως 255. Κατά συνέπεια, η μορφή rgba δεν διαφέρει, προστίθεται μόνο μία ακόμη παράμετρος - το κανάλι άλφα. Η τιμή μπορεί να είναι από 0 έως 1, όπου το 0 είναι πλήρης διαφάνεια.