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

σύντομες πληροφορίες

Εκδόσεις CSS

Αξίες

url Η τιμή είναι η διαδρομή προς το αρχείο γραφικών, η οποία καθορίζεται μέσα στην κατασκευή url(). Η διαδρομή προς το αρχείο μπορεί να γραφτεί είτε σε εισαγωγικά (διπλά ή μονά) είτε χωρίς αυτά. κανένας Ακυρώνει εικόνα φόντουγια το στοιχείο. 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 δεν υποστηρίζουν την τιμή κληρονομιάς.

Εάν το φόντο έχει οριστεί για μια σειρά πίνακα (ετικέτα ), μετά το Chrome, το Safari, το iOS το εμφανίζουν όχι όπως ορίζεται από την προδιαγραφή, δηλαδή για κάθε κελί ξεχωριστά. Ενώ το πρόγραμμα περιήγησης θα πρέπει να εμφανίζει σταθερό φόντο για ολόκληρη τη σειρά. Το Παράδειγμα 2 δείχνει τον κώδικα που δείχνει το σφάλμα.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Αποτέλεσμα αυτό το παράδειγμα V πρόγραμμα περιήγησης Chromeφαίνεται στο Σχ. 1. Περιηγητής διαδυκτίουΟι Explorer, Opera και Firefox εμφανίζουν σωστά το φόντο για τη γραμμή (Εικόνα 2).

Ρύζι. 1. Επαναλάβετε το φόντο για κάθε κελί

Ρύζι. 2. Φόντο για ολόκληρη τη γραμμή

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θα εξετάσουμε πέντε κανόνες CSS που σας επιτρέπουν να ορίσετε ένα φόντο για οποιοδήποτε στοιχείο στο Html - θέση φόντου (εικόνα, επανάληψη, χρώμα, συνημμένο). Λοιπόν, ας μην ξεχάσουμε επίσης να αναφέρουμε τον κανόνα της σύνθεσης του φόντου.

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

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

Χρώμα, χρώμα φόντου και εικόνα φόντου

Ας δούμε πρώτα πώς γίνεται το χρώμα στοιχεία HTMLμε τη χρήση Κανόνες χρώματος Css. Στην πραγματικότητα, όλα είναι απλά εδώ. Η σύνταξη είναι απολύτως φυσιολογική και μπορείτε να ορίσετε το χρώμα σύμφωνα με το πώς έγινε στη γλώσσα σήμανσης υπερκειμένου. Όπως θυμάστε, τοποθετείται μετά το σύμβολο κατακερματισμού (hash - "#fe35a3"), ή χρησιμοποιώντας τρία ψηφία, εάν το πρώτο συμπίπτει με την τιμή του δεύτερου, το τρίτο με το τέταρτο και το πέμπτο, αντίστοιχα, με το έκτο ( Ο χρωματικός κωδικός "#aa33ff" μπορεί να γραφεί εν συντομία ως "a3f").

Επίσης χρώματα σε Html και Κωδικός Cssμπορεί να αναπαρασταθεί ως λέξεις (για παράδειγμα, "κόκκινο"), αλλά τις περισσότερες φορές είναι ο δεκαεξαδικός κώδικας που χρησιμοποιείται:

Χρώμα:#303

Για παράδειγμα, έβαψα αυτή τη μικρή παράγραφο με το ίδιο χρώμα όπως παραπάνω (#303). Τώρα είναι ελαφρώς διαφορετικό από το χρώμα όλων των άλλων παραγράφων (πιο σκούρο), το οποίο έχει οριστεί σε #555 in αρχείο CSSχρησιμοποιείται από εμένα Θέματα WordPress. Αλλά η ρύθμιση του χρώματος με χρήση χρώματος είναι αρκετά απλή, αλλά με το φόντο θα είναι λίγο πιο περίπλοκο.

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

1. χρώμα φόντου - χρησιμοποιώντας αυτόν τον κανόνα, ορίζετε το χρώμα φόντου για οποιοδήποτε στοιχείο 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 - tools διάταξη μπλοκ
Τοποθέτηση με χρήση του δείκτη Z και Κανόνας CSSΔρομέας για αλλαγή του δρομέα του ποντικιού

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

Θέση φόντου

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

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

φόντο-θέση: πάνω δεξιά;

φόντο-θέση: πάνω δεξιά;

Δηλαδή, κάθετα όλα παραμένουν ίδια: η εικόνα φόντου βρίσκεται στην κορυφή, αλλά οριζόντια αλλάξαμε την πλευρά προς τα δεξιά, δηλαδή δεξιά. Ένας άλλος τρόπος για να ορίσετε μια θέση είναι ως ποσοστό. Σε αυτή την περίπτωση, η αντίστροφη μέτρηση ξεκινά σε κάθε περίπτωση από την επάνω αριστερή γωνία. 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 είναι πλήρης διαφάνεια.