Πώς να κάνετε ένα υπόβαθρο εικόνας σε HTML και CSS. 3 απλά τρόποι

Ορίζει το χρώμα του πίσω σχεδίου από την παλέτα. Το χρώμα του κληρονόμου συμπίπτει πάντα με το χρώμα του στοιχείου προγόνων.
Χαιρετίσματα. Σε αυτό το άρθρο, θέλω να πω για τρεις τρόπους για να τοποθετήσετε μια εικόνα ως φόντο ολόκληρης της σελίδας χρησιμοποιώντας μόνο HTML + CSS (χωρίς χρήση JS).

Χαιρετίσματα. Σε αυτό το άρθρο, θέλω να πω για τρεις τρόπους για να τοποθετήσετε μια εικόνα ως φόντο ολόκληρης της σελίδας χρησιμοποιώντας μόνο HTML + CSS (χωρίς χρήση JS).

Έτσι, οι απαιτήσεις για την εικόνα φόντου είμαστε ως εξής:

  • 100% πλάτος και σελίδες ύψους καλύπτονται
  • Η κλίμακα υποβάθρου εάν είναι απαραίτητο (το φόντο είναι τεντωμένο ή συμπιεσμένο ανάλογα με το μέγεθος της οθόνης)
  • Επικολλήστε τις αναλογίες των εικόνων (λόγος διαστάσεων)
  • Εικόνα κεντραρισμένη στη σελίδα
  • Το φόντο δεν προκαλεί κύλιση
  • Η λύση είναι μέγιστη crossbrawser
  • Δεν χρησιμοποιούνται άλλες τεχνολογίες εκτός από το CSS

Ορίζει το χρώμα του πίσω σχεδίου από την παλέτα. Το χρώμα του κληρονόμου συμπίπτει πάντα με το χρώμα του στοιχείου προγόνων.

Μέθοδος 1

Κατά τη γνώμη μου, αυτός είναι ο καλύτερος τρόπος, επειδή είναι η ευκολότερη, συνοπτική και σύγχρονη. Χρησιμοποιεί την ιδιότητα CSS3 Μέγεθος φόντου. που εφαρμόζουμε στην ετικέτα Html. . Ακριβώς Html. , αλλά όχι Σώμα. επειδή Το ύψος του είναι μεγαλύτερο ή ίσο με το ύψος του παραθύρου του προγράμματος περιήγησης.

Τοποθετήστε ένα σταθερό και κεντρικό φόντο, στη συνέχεια ρυθμίστε το μέγεθος του χρησιμοποιώντας Ιστορικό μέγεθος: κάλυψη .

Html { 

Ιστορικό - Εικόνα: URL (εικόνες / background.jpg);

Ιστορικό-Επαναλάβετε: Καμία επανάληψη?

Θέση φόντου: Κέντρο Κέντρο;

Συνημμένο υπόβαθρο: Σταθερό;

-Webkit-φόντο-μέγεθος: κάλυψη;

-Moz-φόντο-μέγεθος: κάλυψη;

-Ο-φόντο-μέγεθος: κάλυψη;

Ιστορικό μέγεθος: κάλυψη; 
} 

Διαδήλωση

Αυτή η μέθοδος λειτουργεί

  • Chrome (οποιαδήποτε έκδοση)
  • Όπερα 10+.

Firefox 3.6+

Σαφάρι 3+.

Δηλαδή 9+

Για να φορτώσετε γρήγορα οι εικόνες, τοποθετήστε τις τοποθεσίες σας μόνο από αποδεδειγμένους παρόχους φιλοξενίας, για παράδειγμα, beget.com 
Οι χρήστες και οι μηχανές αναζήτησης αγαπούν γρήγορα τοποθεσίες. 

Ιστορικό - Εικόνα: URL (εικόνες / background.jpg);

Μέθοδος 2

Αυτή η μέθοδος προβλέπει τη χρήση του στοιχείου IMG, το μέγεθος του οποίου θα ποικίλει ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για να τεντώσετε την εικόνα στην πλήρη οθόνη, πρέπει να ορίσετε το ύψος και πλάτος με τιμή 100%. Και έτσι ώστε η εικόνα να μην συμπιέζεται στο μικρότερο μέγεθος από το πρωτότυπο, εγκαταστήστε το λεπτό πλάτος με την τιμή ίσου πλάτους της εικόνας.

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

κληρονομώ.

<img src = "/ εικόνες / background.jpg" class = "φόντο" />

img.background { Min-Ύψος: 100%. Min-πλάτος: 640px; Πλάτος: 100%. Ύψος: Auto?

Θέση: Σταθερή. Κορυφή: 0; Αριστερά: 0;

/ * Εξαρτάται από το μέγεθος της εικόνας * /

@ Οθόνη @media και (μέγιστο πλάτος: 640px) { img.bg { и Αριστερά: 50%. Περιθώριο: -320PX; } } } Διαδήλωση

Κληρονομεί όλα τα χαρακτηριστικά του γονικού στοιχείου

Αυτή η μέθοδος λειτουργεί:

Οποιεσδήποτε εκδόσεις καλών προγραμμάτων περιήγησης (Chrome, Opera, Firefox, Safari) Δηλαδή 9+ и Μέθοδος 3. . Ένας άλλος τρόπος έχει ως εξής: Διορθώστε την εικόνα <img /> στην επάνω αριστερή γωνία της σελίδας και τεντώστε το χρησιμοποιώντας τις ιδιότητες Min-Width και Min-Ύψου του 100%, διατηρώντας παράλληλα την αναλογία διαστάσεων. Αληθινή, με αυτή την προσέγγιση, η εικόνα δεν επικεντρώνεται. Αλλά αυτό το πρόβλημα επιλύεται από τυλιγμένη εικόνα σε <Div />, το οποίο κάνουμε 2 φορές το μέγεθος του παραθύρου. Και η ίδια η εικόνα που τεντώνουμε και βάζουμε στο κέντρο. <DIV CLASS = "Ιστορικό"> <img src = "/ εικόνες / background.jpg" />

</ DIV> Div.Background { <DIV CLASS = "Ιστορικό"> Θέση: Σταθερή.

Κορυφή: -50%.

Αριστερά: -50%. } Πλάτος: 200%. Ύψος: 200%. }

img { Θέση: Απόλυτη. Κορυφή: 0;

Αριστερά: 0; Δεξιά: 0; :

Κάτω: 0;

Περιθώριο: Αυτόματη; Min-πλάτος: 50%. min-Ύψος: 50%. } .

Αυτή η μέθοδος λειτουργεί σε καλά προγράμματα περιήγησης και δηλαδή 8+.

Ελπίζω ότι αυτές οι πληροφορίες θα είναι χρήσιμες για εσάς. Προσωπικά, χρησιμοποιώ συχνά αυτές τις μεθόδους, ειδικά πρώτα. Σίγουρα υπάρχουν και άλλοι τρόποι να τοποθετήσετε μια εικόνα στο πίσω φόντο με το CSS. Αν γνωρίζετε γι 'αυτά, μοιραστείτε, παρακαλούμε σχόλια. Ορίστε το χρώμα φόντου και / ή μια εικόνα για μια σελίδα ή ένα ξεχωριστό στοιχείο είναι αρκετά απλό. Το κύριο πράγμα είναι να γνωρίζουμε πού και πώς μπορεί να γίνει, καθώς και να έχει έναν κωδικό χρώματος και / ή μια εικόνα φόντου. Είναι πιθανό από αυτό το άρθρο να μάθετε πολλά νέα πράγματα, αλλά το δημιούργησα ειδικά για αρχάριους. Επομένως, όλα θα είναι όσο το δυνατόν συντομότερα και λεπτομερώς ταυτόχρονα. Το κύριο πράγμα είναι ότι θα λάβετε μόνο τη συνολική παρουσίαση και τα έτοιμα παραδείγματα, αλλά και να κατανοήσετε πώς να κάνετε ένα φόντο στο HTML. Για να ορίσετε το φόντο στο HTML Χρησιμοποιήστε το ενδιάμεσο DOCTYPE Και θα ξεκινήσω με το γεγονός ότι Html5. Δεν υπάρχει δυνατότητα να ορίσετε το φόντο για τον ιστότοπο. Αυτή η λειτουργία αποφασίστηκε να υπομείνει στο CSS. Επομένως, εάν σκοπεύετε να χρησιμοποιήσετε παρακάτω, και θέλετε να πάρετε έγκυρη » (σωστός) Κωδικός, πρέπει να παραμείνετε στον τύπο μετάβασης του εγγράφου. Για να το κάνετε αυτό, η ιστοσελίδα σας θα πρέπει να ξεκινήσει με την ακόλουθη γραμμή: <! DOCTYPE HTML Public "- // W3C // DTD HTML 4.01 » Μεταβατικός // el "" http://www.w3.org/tr/html4/lloose.dtd ">

Χρόνος για πρακτικές τάξεις

Πώς είναι το φόντο σε μια ιστοσελίδα; (#)Εάν το καταλάβατε, ας καταλάβουμε πώς δημιουργείται το φόντο. Και το πρώτο πράγμα που πρέπει να σημειωθεί - αυτή είναι η διαφορά μεταξύ

Χρώμα του φόντου

Εικόνα φόντου

. Στην αρχή πηγαίνει

Χρώμα του φόντου Αριστερά: 50%. που πλημμυρίζει όλα τα διαθέσιμα χώρο σελίδας ή το στοιχείο του. Το επαναλαμβανόμενο πάνω του εικόνα φόντου }

. Οπτικά, αυτό μπορεί να απεικονιστεί ως εξής: Θέση: Απόλυτη. Κορυφή: 0;

Ιστορικό του εγγράφου HTML και τα στοιχεία του

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

Το δεύτερο πράγμα που πρέπει να ξέρετε είναι η διαφορά μεταξύ

σώμα του εγγράφου Δεξιά: 0; :

στοιχείο του εγγράφου

Σώμα του εγγράφου

που υποδεικνύεται στον κώδικα HTML της ετικέτας ιστοσελίδας

Σώμα. που περιλαμβάνει όλο το περιεχόμενο της ιστοσελίδας. Προφανώς, το υπόβαθρο του εγγράφου του εγγράφου δεν μπορεί να είναι διαφανές. Εάν το υπόβαθρο του σώματος του εγγράφου δεν έχει καθοριστεί, χρησιμοποιείται η προεπιλεγμένη τιμή που καθορίζεται στις ρυθμίσεις του προγράμματος περιήγησης. Στοιχεία σελίδας είναι μέσα στην ετικέτα }

. Αξίζει να σημειωθεί ότι μπορείτε να ρυθμίσετε την εικόνα χρώματος ή / και φόντου χρησιμοποιώντας το HTML σε όλα τα στοιχεία του εγγράφου. Για παράδειγμα, η εικόνα φόντου μπορεί να καθοριστεί μόνο για πίνακες. Από προεπιλογή, συνήθως έχουν ένα διαφανές υπόβαθρο. Θέση: Απόλυτη. Κορυφή: 0;

Χαρακτηριστικό BGCOLOR για να δημιουργήσετε χρώμα φόντου

Για να ρωτήσετε

Το έγγραφο ή τα στοιχεία του χρησιμοποιούνται χαρακτηριστικά Ύψος: 200%. и εικόνα φόντου bgcolor , π.χ: <Body BGCOLOR = "# EC008C">

<! - Σώμα εγγράφων ->

</ Body>

Σε αυτή την περίπτωση, ορίζουμε το χρώμα του φόντου για τη σελίδα ως σύνολο. Αλλά ένα παράδειγμα του τρόπου ρύθμισης του χρώματος φόντου για το τραπέζι, στην ετικέτα Τραπέζι <Πίνακας BGCOLOR = "# EC008C"> <TR> <TD> Κείμενο με φόντο </ TD> </ TR> </ Table>

Αξίζει να σημειωθεί ότι το χρώμα του φόντου στο τραπέζι μπορεί επίσης να καθοριστεί για σειρές στην ετικέτα

Tr Και για τα κύτταρα τους στην ετικέτα TD.

Πώς να μάθετε τον κωδικό χρώματος; Πιθανότατα έχετε ήδη παρατηρήσει ότι το χρώμα στο HTML έχει οριστεί σε ειδική κώδικας Html. , π.χ:

# EC008C.

  • . Για να μάθετε τον κώδικα που χρειάζεστε το χρώμα που μπορείτε να χρησιμοποιήσετε έναν από τους επεξεργαστές γραφικών. Για παράδειγμα, στο Photoshop μπορείτε να χρησιμοποιήσετε "
  • Εργαλείο Eyedropper.
  • (Σταγονόμετρο)

Για να πάρετε ένα χρώμα από ένα σημείο στην εικόνα. Στη συνέχεια, πρέπει να κάνετε κλικ στο προκύπτον χρώμα στη γραμμή εργαλείων και στο παράθυρο που ανοίγει "

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

Μπορείτε επίσης να χρησιμοποιήσετε πολλές ηλεκτρονικές υπηρεσίες, για παράδειγμα: 
Η αρχή της εργασίας τους είναι ακόμη πιο εύκολη - κάντε κλικ στο επιθυμητό χρώμα και λάβετε τον κωδικό. Χαρακτηριστικό υπόβαθρο για να δημιουργήσετε μια εικόνα φόντου Καθώς και στην περίπτωση του χρώματος του φόντου και στην περίπτωση του
Πρέπει να χρησιμοποιήσετε ένα ειδικό χαρακτηριστικό, δηλαδή 
Ιστορικό. 
<Body Background = / 2014/06 / BG.JPG ">

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

<φόντο πίνακα = "/ 2014/06 / bg.jpg"> <tr> <td> κείμενο με φόντο </ td> </ tr> </ table> Html. Αξίζει να σημειωθεί ότι η εικόνα φόντου μπορεί να οριστεί μόνο για τον πίνακα ως σύνολο και / ή το ξεχωριστό της κελί. Για μια συμβολοσειρά δεν θα λειτουργήσει. Χαρακτηριστικό υπόβαθρο για να δημιουργήσετε μια εικόνα φόντου .

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

την πλήρη διεύθυνση URL του <background background = / εικόνες / bg.jpg "> .

Σε αυτή την περίπτωση, δεν θα έχετε ταυτόχρονα προβλήματα. Για περισσότερα σχετικά με αυτό μπορείτε να διαβάσετε εδώ.

Ας συνοψίσουμε 
Χρησιμοποιώντας χαρακτηριστικά ηθικά ξεπερασμένη, διότι για την εγκυρότητα του κώδικα HTML θα πρέπει να χρησιμοποιήσετε τη μεταβατική Doctype.

. Για να ορίσετε το χρώμα φόντου σε HTML, χρησιμοποιεί ειδικούς κωδικούς που μπορείτε να μάθετε σε έναν επεξεργαστή γραφικών ή χρησιμοποιώντας ειδικές υπηρεσίες σε απευθείας σύνδεση. Η εικόνα φόντου αντιγράφεται στις ουρές της περιοχής που διατίθενται και βρίσκεται πάνω από το χρώμα του φόντου. Για να καθορίσετε μια εικόνα φόντου, είναι καλύτερο να χρησιμοποιήσετε την πλήρη διεύθυνση URL του. Έχω τα πάντα σε αυτό. Ευχαριστώ για την προσοχή. Καλή τύχη!

Σύντομη σύνδεση: http://goo.gl/03tsnz Πώς να κάνετε ένα φόντο για τον ιστότοπο; Οποιοδήποτε δωμάτιο θα φανεί πολύ καλύτερα αν το δάπεδο της ανεβαίνει Αγαπητέ Περσικό χαλί. Έτσι ο χειρότερος ιστότοπός σας; Ίσως είναι καιρός και το πάτωμα του " σειρά
  • »Ακριό κομψό χειροποίητο παλάτι. Θα καταλάβουμε περισσότερα για το πώς να κάνετε ένα φόντο για τον ιστότοπο:
  • Αυτό συμβαίνει ότι ο παλιός σχεδιασμός του ιστότοπου έχει ήδη έρθει. Και θέλω κάτι νέο και νόστιμο. Και ο νέος σχεδιασμός θα είναι τόσο αν το μαγειρέψετε με τα χέρια σας.
  • Αλλά να αλλάξετε εντελώς όλο το σχεδιασμό του πόρου μόνοι σας - το πράγμα είναι αχάριστο. Ναι, και όχι όλοι δεν έχουν κάτι γι 'αυτό. "
  • οξύνους

"Χέρια. Επομένως, είναι ευκολότερο να ανανεώσετε το παλιό πρότυπο, αλλάζοντας το χρώμα του φόντου του πόρου ή της εικόνας φόντου του.

Υπάρχουν διάφοροι τρόποι να αλλάξετε το φόντο στον ιστότοπο. Αυτό χρησιμοποιεί ευκαιρίες. 
CSS. ή . Αλλά πολλές από τις ιδιότητες για εργασία με το φόντο έχουν το ίδιο όνομα και μεθοδολογία εφαρμογής σε αυτές τις τεχνολογίες ιστού.
  • Ως φόντο, μπορείτε να χρησιμοποιήσετε πολλά στοιχεία: Χρώμα; ;
  • Εικόνα φόντου;
  • Εικόνα υφή. Θα ασχοληθούμε με τη χρήση καθενός από αυτά λεπτομερέστερα. Προκειμένου να ρυθμίσετε το χρώμα του πίσω φόντου για τον ιστότοπο, χρησιμοποιείται το ακίνητο.

χρώμα του φόντου.

Χαρακτηριστικό στυλ 

Στυλ. . Δηλαδή, για να ορίσετε το βασικό χρώμα για την ιστοσελίδα, πρέπει να την καταχωρίσετε μέσα στην ετικέτα <Body>. Για παράδειγμα: <Στυλ σώματος = "Χρώμα φόντου: # 55d52B"> <p> Ιστορικό της ιστοσελίδας # 55D52B </ p> </ Body>

Εκτός από τον δεκαεξαδικό κώδικα χρωμάτων, η τιμή υποστηρίζεται στη μορφή λέξης-κλειδιού ή

RGB. 

. Παραδείγματα:

<Στυλ σώματος = "Χρώμα φόντου: RGB (51.255.153)"> <p> Ιστορικό του ιστότοπου RGB (23,113,44) </ P> </ Body> <Body Style = "Ιστορικό-Χρώμα: Πράσινο"> <p> Ιστορικό της πράσινης ιστοσελίδας </ P> </ Body> Η ρύθμιση του χρώματος φόντου χρησιμοποιώντας λέξεις-κλειδιά έχει έναν αριθμό περιορισμών σε σύγκριση με τους υπόλοιπους δύο τρόπους.

Σύνολο 16 λέξεων-κλειδιών υποστηρίζονται για το χρώμα ρύθμισης. Εδώ είναι μερικά από αυτά:

Λευκό, κόκκινο, μπλε, μαύρο, κίτρινο άλλα. Επομένως, για να ορίσετε το φόντο για τον ιστότοπο

Είναι καλύτερα να χρησιμοποιείτε δεκαεξαδική μορφή ή 

Εκτός από την επιλογή του χρώματος, υπάρχουν άλλες ρυθμίσεις. Αν υπάρχει ιδιοκτησία Ορισμός τιμής Διαφανής

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

Παράδειγμα: 

<Body Style = "Εικόνα: URL (IMG_1809.jpg)"> </ Body>

Όπως μπορεί να δει από τον κώδικα, η δέσμευση εικόνας συμβαίνει μέσω της διαδρομής

Ουσία

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

Ας υποθέσουμε ότι αναπτύσσουμε έναν ιστότοπο για την ποίηση και ως ένα υπόστρωμα πρέπει να χρησιμοποιήσετε την εικόνα του Pegasus. Το φτερωτό άλογο θα προσωποποιήσει την ελευθερία της δημιουργικής σκέψης του ποιητή!

Χρειαζόμαστε ότι η εικόνα εμφανίζεται στη μέση της οθόνης μία φορά. Αλλά, δυστυχώς, το πρόγραμμα περιήγησης δεν καταλαβαίνει τις πανέμορφες επιθυμίες μας. Και εμφανίζει μια μικρότερη εικόνα για το φόντο του ιστότοπου όσες φορές μπορεί να φιλοξενήσει η περιοχή οθόνης:

Πιθανώς τέσσερα χαμογελαστά άλογα με φτερά ποιητών θα είναι πάρα πολύ για έμπνευση. Ως εκ τούτου, απαγορεύουν την κλωνοποίηση του Πήγασου μας. Κάντε το χρησιμοποιώντας το ακίνητο

φόντο-επανάληψη. . Πιθανές τιμές: Επαναλάβετε το X - Επανάληψη της εικόνας φόντου οριζόντια.

Έτσι, διευκολύνουμε το καθήκον να ορίσει το πίσω φόντο από δύο εικόνες: animation και κανονική εικόνα. Σε αυτή την περίπτωση, η κινούμενη εικόνα GIF θα καθοριστεί και το σχέδιο μετακινηθεί μαζί με τα περιεχόμενα της σελίδας.

Επαναλάβετε-y - κατακόρυφα.

Επαναλάβετε - και στους δύο άξονες.

Απαγορεύεται η επανάληψη της επανάληψης.

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

<Body Style = "Εικόνα: URL (3.jpg); φόντο-Επαναλάβετε: No-Repeat"> </ Body>

Αλλά, φυσικά, είναι καλύτερα αν η λατρεία μας βρίσκεται στη μέση της οθόνης. Ιδιοκτησία

Θέση φόντου Απλά προορίζεται να τοποθετήσει το μοτίβο φόντου στη σελίδα. Ορίστε τις συντεταγμένες τοποθεσίας με διάφορους τρόπους:
. Δηλαδή, για να ορίσετε το βασικό χρώμα για την ιστοσελίδα, πρέπει να την καταχωρίσετε μέσα στην ετικέτα <Body>. Για παράδειγμα: Λέξη-κλειδί (
<background background = / εικόνες / bg.jpg "> Κορυφή, κάτω, κέντρο, αριστερά, δεξιά)
ή Ποσοστά - η αντίστροφη μέτρηση αρχίζει από την επάνω αριστερή γωνία.
Οποιοδήποτε δωμάτιο θα φανεί πολύ καλύτερα αν το δάπεδο της ανεβαίνει Αγαπητέ Περσικό χαλί. Έτσι ο χειρότερος ιστότοπός σας; Ίσως είναι καιρός και το πάτωμα του " Σε μονάδες μέτρησης (
(Επιλογή χρώματος) Εικονοστοιχεία
). Χρησιμοποιούμε την ευκολότερη επιλογή για κεντράρισμα:

<Body Style = "Εικόνα Ιστορικού: URL (3.jpg); Επαναλάβετε την επανάληψη: No-Repeat; Θέση φόντου: Κορυφή Κέντρο"> </ Body>

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

Κατάλληλο συνημμένο.

. Ισχύς τιμών: <ul> <li> scroll, </ li> <li> </ li> </ ul>

Χρειαζόμαστε το τελευταίο νόημα. Τώρα ο κώδικας του παραδείγματος θα μοιάζει με αυτό: [/ html] 
<Body Style = "Εικόνα Ιστορικό: URL (3.jpg); Επαναλάβετε την επανάληψη: NO-REPORE; Θέση φόντου: Κορυφή Κέντρο: Σταθερό"> </ Body> 

Στο πρώτο παράδειγμα, για το φόντο, χρησιμοποιήσαμε ένα μεγάλο και όμορφο τοπίο της ερήμου. Αλλά για μια τέτοια ομορφιά πρέπει να πληρώσετε πλήρως. Το βάρος της εικόνας που εκτελείται σε υψηλή ποιότητα μπορεί να φτάσει σε πολλά megabytes.

Αυτός ο τόμος δεν επηρεάζει την ταχύτητα λήψης της σελίδας του προγράμματος περιήγησης με σύνδεση υψηλής ταχύτητας με το Internet. Αλλά τι γίνεται με το κινητό internet, όταν χρησιμοποιείτε ποια λήψη αρκετών "

μετρητής

"Θα πάρει πολύ χρόνο;

"Θα πάρει πολύ χρόνο; Όλα αυτά τα προβλήματα επιλύονται χρησιμοποιώντας φόντο υφής. Χρησιμοποιεί μια μικρή εικόνα ως ένα πρότυπο υφή. Ακόμη και κάτω από την κατάσταση της πολλαπλής επανάληψης, το πρότυπο φορτώνεται μόνο μία φορά.

Για να δημιουργήσετε ένα σκούρο φόντο για το site πηγαίνετε Σώμα. Photoshop. Σώμα. , Δημιουργήστε μια εικόνα με τη μορφή λωρίδας μακράς 1200 pixel και πλάτος 15 εικονοστοιχείων. Στη συνέχεια, χρησιμοποιούμε μια απλή ασπρόμαυρη κλίση και συνδέουμε την προκύπτουσα υφή στη σελίδα του ιστότοπου:

<Body Style = "Εικόνα: URL (1.png); Χρώμα: RGB (0,51,204)"> </ Body>

Για λόγους σαφήνειας, προσθέσαμε κείμενο και έβαλα το χρώμα χρησιμοποιώντας το ακίνητο. Σώμα. Χρώμα Σώμα. . Αυτό συνέβη:

  • Ύψος: 200%. Όλες οι ιδιότητες που περιγράφονται παραπάνω ισχύουν επίσης για τα φύλλα στυλ Cascading. Δημιουργήστε ένα φόντο του ιστότοπου
  • εικόνα φόντου CSS.
  • Με την επανεγγραφή του κώδικα ενός από τα προηγούμενα παραδείγματα μας: <Head> <Τίτλος> Έγγραφο Untitled </ Τίτλος> <Στυλ τύπου = "Κείμενο / CSS"> Σώμα {Body-image {Background-Image: URL (3.jpg); Επαναλάβετε την επανάληψη: Καμία επανάληψη? Θέση φόντου: Κορυφαία Κέντρο, Συνημμένο υπόβαθρο: Σταθερό;} </ στυλ> </ Head> <Body> </ Body>
  • Το αποτέλεσμα θα είναι παρόμοιο. Λοιπόν, εξετάσαμε όλες τις επιλογές, πώς να αλλάξετε το φόντο στον ιστότοπο. Τώρα παραμένει μόνο να δημιουργήσετε ένα σχέδιο του μελλοντικού χαλιού και να το εξαπλώσετε στις σελίδες του πόρου σας. Αλλά αυτό είναι το χέρι σας.
  • Καλή μέρα σε όλους να μάθουν και να μάθουν κάτι νέο! Έχετε ποτέ δώσει προσοχή στην εμφάνιση ιστότοπων κατά την ανάπτυξη των δημιουργών έχουν τεμπέλυν να κανονίσει το φόντο των σελίδων; Και γύρισα. Φαίνεται σφαγή. Συχνά, λόγω της έλλειψης συνήθων διαχωρισμού μεταξύ διαφορετικών τύπων πληροφοριών, είναι μικτή και απλά εξαφανίζεται την επιθυμία να εξετάσει περαιτέρω έναν τέτοιο πόρο Web. Έτσι, αυτό το πρόβλημα συνέβη στο έργο σας, αποφάσισα να γράψω ένα άρθρο σχετικά με το θέμα: "Πώς να κάνετε ένα φόντο σελίδων σε html". Μετά την ανάγνωση της δημοσίευσης, θα μάθετε, με ποια εργαλεία μπορείτε να ορίσετε τον σχεδιασμό φόντου, πώς να κάνετε ένα φόντο σταθερό ή να αλλάξει και πολλά άλλα, που θα βοηθήσει στην ιστοσελίδα σας ελκυστική. Τώρα ας ξεκινήσουμε!
  • Βασικά εργαλεία για τη ρύθμιση των ιστοσελίδων φόντου Για να ορίσετε την εικόνα φόντου, οι προγραμματιστές της γλώσσας Web έχουν παράσχει ένα υπόβαθρο χαρακτηριστικών. Διατίθεται τόσο σε HTML όσο και σε CSS.
  • Στη γλώσσα σήμανσης, αυτό είναι ένα χαρακτηριστικό της ετικέτας του σώματος και στα τραπέζια στυλ - μια παγκόσμια ιδιοκτησία που σας επιτρέπει να ρυθμίσετε ταυτόχρονα τα χαρακτηριστικά του πίσω σχεδίου. Το φόντο είναι ένα αρκετά ευέλικτο στοιχείο που μπορεί να χρησιμοποιηθεί για την εργασία του φόντου ως έγχρωμο, έγχρωμη εικόνα ή ακόμα και κινούμενα σχέδια. Έτσι, για να εγκαταστήσετε την εικόνα φόντου μέσω της μονάδας HTML <Body> είναι αρκετό για να γράψετε έναν τέτοιο κωδικό:
  • <Body Background = "Διεύθυνση Αρχείου"> ... </ Body> Και αντί των λέξεων "Διεύθυνση αρχείου" Εισάγετε τη διαδρομή προς την εικόνα.
  • Ωστόσο, ειδοποίηση! Εάν με τη μορφή του φόντου θέλετε να δείτε έναν καμβά μονοχών που καθορίζεται από την παλέτα χρωμάτων, τότε αυτό γίνεται χρησιμοποιώντας το χαρακτηριστικό BGColor. Για παράδειγμα, <Body BGColor = "# 000000"> ... </ Body>, Ζητήσαμε ένα μαύρο φόντο για τον ιστότοπό μας.
  • Τα χρώματα στο CSS και HTML καθορίζονται είτε από μια αγγλική λέξη (για παράδειγμα, κόκκινο) είτε έναν ειδικό κώδικα που αποτελείται από ένα σημάδι # και έξι χαρακτήρες μετά από αυτό (για παράδειγμα, # ffdab9). Όταν πληκτρολογείτε μια δεύτερη επιλογή σε εξειδικευμένα προϊόντα λογισμικού για προγραμματιστές, η παλέτα θα εμφανιστεί αυτόματα μπροστά σας. Εάν μόλις αρχίσετε να μαθαίνετε αυτές τις γλώσσες ιστού, τότε ο κώδικας χρώματος μπορεί να μετατραπεί στο διαδίκτυο.

Ιστορικό ως ιδιοκτησία σε τραπέζια στυλ Cascading Ύψος: 200%. :

Βρίσκεται ή σε ένα ξεχωριστό αρχείο με στυλ CSS ή στο στοιχείο <στυλ>. Με αυτό το ακίνητο, μπορείτε να εγκαταστήσετε πρότυπα ή χρώμα φόντου, καθορίστε τη θέση εκκίνησης στη σελίδα, ρυθμίστε επαναλαμβανόμενες και σταθερές εικόνες. Για μεγαλύτερη σαφήνεια, έκανα ορισμούς στον πίνακα. 

Παράμετροι Σκοπός

Χρησιμοποιείται για την εγκατάσταση μιας σταθερής ή κύλισης εικόνας μαζί με το περιεχόμενο της τοποθεσίας. Συμβαίνει σταθερή, κύλιση και κληρονομεί

Ορίζει την εικόνα φόντου. Μπορεί να υποδεικνύεται ταυτόχρονα με το χρώμα. Στη συνέχεια, το τελευταίο θα εμφανιστεί μέχρι να φορτωθεί πλήρως η εικόνα.

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

Εφαρμόστε όταν χρησιμοποιείτε το χαρακτηριστικό φόντου-εικόνας. Ρυθμίζει τον τρόπο επαναληπτικής εικόνας. Μπορείτε να ορίσετε 2 τιμές: για οριζόντια και κάθετη. Υπάρχουν χαρακτηριστικά: μην επαναλάβετε, επαναλάβετε, επαναλάβετε-x, επαναλάβετε-y, κληρονομήστε, χώρος

Добавить комментарий