λόγω της ευκολίας και της ευελιξίας του, για να το ξεχωρίσει από άλλα στοιχεία, προστίθεται σε αυτό η κλάση μπλοκ (παράδειγμα 1).

Παράδειγμα 1: Δύο εικόνες φόντου

HTML5 CSS3 IE Cr Op Sa Fx

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 3.

Σήμερα, σχεδόν κάθε σχέδιο ιστότοπου περιέχει μια όμορφη εικόνα φόντου.

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

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

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

Κώδικας CSS για πολλαπλά υπόβαθρα

Πολλαπλές εικόνες φόντου υλοποιούνται χρησιμοποιώντας πολλαπλές τιμές παράμετρος cssφόντο, τα οποία χωρίζονται από κώμα:

#multipleBGs ( φόντο: url(photo1.png), url(photo2.png), url(photo3.png) ; background-repeat: no-repeat, no-repeat, repeat-y; background-position: 0 0, 30 px 70 εικονοστοιχεία, επάνω δεξιά, πλάτος: 400 εικονοστοιχεία, ύψος: 400 εικονοστοιχεία, περίγραμμα: 1 εικονοστοιχείο συμπαγές #cccc; )

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

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

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

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

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

Σύνθεση φόντου

Υπάρχουν πολλοί λόγοι για τους οποίους μπορεί να θέλετε να συνθέσετε πολλές εικόνες στο παρασκήνιο, οι πιο σημαντικοί από τους οποίους είναι:

• εξοικονόμηση επισκεψιμότητας στο μέγεθος των εικόνων, εάν οι μεμονωμένες εικόνες ζυγίζουν λιγότερο συνολικά από μια εικόνα με επίπεδα επίπεδα, και
• την ανάγκη για ανεξάρτητη συμπεριφορά μεμονωμένων επιπέδων, για παράδειγμα, κατά την υλοποίηση εφέ παράλλαξης.

Μπορεί να υπάρχουν άλλοι εύλογοι λόγοι :)

Κλασική προσέγγιση

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

Ένα μπλοκ με την κλάση "ψάρεμα" μέσα στο "γοργόνα" είναι μόνο για λόγους επίδειξης.

Τώρα μερικά στυλ:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( ύψος:300px; πλάτος:480px; θέση: σχετική; ) .sample1 .sea ( φόντο: url(media/sea.png) repeat-x επάνω αριστερά; ) .sample1 .mermaid ( φόντο: url(media/mermaid.svg) repeat-x κάτω αριστερά; ) .sample1 .fish ( φόντο: url(media/fish.svg) no-repeat; ύψος:70px; πλάτος:100px; αριστερά : 30 εικονοστοιχεία, επάνω: 90 εικονοστοιχεία, θέση: απόλυτη

Αποτέλεσμα:

Σε αυτό το παράδειγμα, υπάρχουν τρία ένθετα υπόβαθρα και ένα μπλοκ με ψάρια που βρίσκονται δίπλα στα μπλοκ "φόντο". Θεωρητικά, τα ψάρια μπορούν να μετακινηθούν, για παράδειγμα, χρησιμοποιώντας JavaScript ή CSS3 Transitions/Animations.

Παρεμπιπτόντως, αυτό το παράδειγμα για το ".fishing" χρησιμοποιεί τη νέα σύνταξη για την τοποθέτηση στο παρασκήνιο, που ορίζεται επίσης στο CSS3:
φόντο: url(media/fishing.svg) χωρίς επανάληψη επάνω δεξιά 10 εικονοστοιχεία.
Προς το παρόν υποστηρίζεται σε IE9+ και Opera 11+, αλλά δεν υποστηρίζεται σε Firefox 10 και Chrome 16. Επομένως, οι χρήστες των δύο τελευταίων προγραμμάτων περιήγησης δεν θα μπορούν να πιάσουν ακόμα τα ψάρια.

Πολλαπλά υπόβαθρα

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

Και τα αντίστοιχα στυλ:
.sample2 .sea (ύψος:300px; πλάτος:480px; θέση: σχετική; φόντο-εικόνα: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); θέση φόντου: επάνω δεξιά 10 εικονοστοιχεία, κάτω αριστερά, επάνω αριστερά; επανάληψη φόντου: μη επανάληψη, επανάληψη-x, επανάληψη-x ; ) .sample2 .fish ( φόντο: url("media/fish.svg ") χωρίς επανάληψη, ύψος: 70 εικονοστοιχεία, πλάτος: 100 εικονοστοιχεία, αριστερά: 30 εικονοστοιχεία, επάνω: 90 εικονοστοιχεία, θέση: απόλυτη, )
Για να ορίσετε πολλές εικόνες, πρέπει να χρησιμοποιήσετε τον κανόνα εικόνας φόντου, παραθέτοντας τις μεμονωμένες εικόνες διαχωρισμένες με κόμμα. Πρόσθετοι κανόνες, επίσης μια λίστα, μπορούν να ορίσουν τη θέση, τις επαναλήψεις και άλλες παραμέτρους για κάθε εικόνα. Σημειώστε τη σειρά με την οποία παρατίθενται οι εικόνες: τα επίπεδα παρατίθενται από αριστερά προς τα δεξιά από το πάνω προς το κάτω μέρος.

Το αποτέλεσμα είναι ακριβώς το ίδιο:

Ένας κανόνας

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

Στυλ:
.sample3 .sea (ύψος:300px; πλάτος:480px; θέση: σχετική; φόντο-εικόνα: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url ("media/sea.png"); Θέση φόντου: επάνω δεξιά 10 εικονοστοιχεία, κάτω αριστερά, 30 εικονοστοιχεία 90 εικονοστοιχεία, επάνω αριστερά; επανάληψη φόντου: χωρίς επανάληψη, επανάληψη-x ; )

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

Σε αυτή την περίπτωση, ισοδυναμεί με αυτήν την περιγραφή:
background-repeat: no-repeat, repeat-x, χωρίς επανάληψη, επανάληψη-χ;

Ακόμα πιο κοντό

Αν θυμάστε το CSS 2.1, όρισε τη δυνατότητα περιγραφής εικόνων φόντου σε σύντομη μορφή. Τι θα λέγατε για πολλές εικόνες; Αυτό είναι επίσης δυνατό:

Sample4 .sea (ύψος:300px; πλάτος:480px; θέση: σχετική; φόντο: url("media/fishing.svg") επάνω δεξιά 10px no-repeat, url("media/mermaid.svg") κάτω αριστερά επανάληψη-x , url("media/fish.svg") 30px 90px χωρίς επανάληψη, url("media/sea.png") repeat-x;)

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

Δυναμικές εικόνες

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

Παρεμπιπτόντως, εδώ είναι ένα παράδειγμα από τη ζωή - ένα θέμα με μια πικραλίδα στο Yandex:


Αν κοιτάξετε τον κώδικα, θα δείτε κάτι σαν αυτό:

...

Τα μπλοκ με κλάσεις "b-fluff-bg", "b-fluff__cloud" και "b-fluff__item" περιέχουν εικόνες φόντου που επικαλύπτονται μεταξύ τους. Επιπλέον, το φόντο με τα σύννεφα κυλά συνεχώς και οι πικραλίδες πετούν στην οθόνη.

Μπορεί να ξαναγραφτεί χρησιμοποιώντας πολλαπλά υπόβαθρα; Κατ' αρχήν, ναι, αλλά υπόκειται σε 1) υποστήριξη αυτής της δυνατότητας στα προγράμματα περιήγησης προορισμού και... 2) διαβάστε παρακάτω;)

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

Για να προσθέσετε κινούμενα σχέδια στο φόντο των ψαριών μας, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; συνάρτηση animationLoop() (fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) γοργόναΧ = ​​0; fishY = -10 + (10 * Math.cos(t * 0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "πάνω " + fishY + "px δεξιά " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, πάνω αριστερά"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Οπου
Window.RequestAnimFrame = (λειτουργία () (παράθυρο επιστροφής.RequestAnimationFrame || Window.msRequestAnimationFrame || Window.MozRequestAnimationFrame || Window.orequestAnimationFrame || Window.webkitRequestAnimationFrame );)); ))();

Και παρεμπιπτόντως, κινούμενα σχέδια μπορούν επίσης να γίνουν χρησιμοποιώντας CSS3 Transitions/Animations, αλλά αυτό είναι ένα θέμα για ξεχωριστή συζήτηση.

Παράλλαξη και διαδραστικότητα

Τέλος, παρόμοιοι ελιγμοί μπορούν εύκολα να προσθέσουν εφέ παράλλαξης ή διαδραστική αλληλεπίδραση με το φόντο:

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

Sea.style.backgroundPosition = "πάνω " + fishY + "px δεξιά " + fishX + "px, " + mermaidX + "px κάτω," + fishesX + "px " + fishesY + "px, πάνω αριστερά";

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

Τι γίνεται με τη συμβατότητα;

Όλες οι σύγχρονες εκδόσεις δημοφιλών προγραμμάτων περιήγησης, συμπεριλαμβανομένου του IE9+, υποστηρίζουν πολλαπλές εικόνες (μπορείτε να ελέγξετε, για παράδειγμα, το Caniuse).

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

Multiplebgs body ( /* Φοβερές πολλαπλές δηλώσεις BG που ξεπερνούν την πραγματικότητα και ανακατευθύνουν τους νεοσσούς */ ) .no-multiplebgs body ( /* laaaaaame backback */ )
Εάν ανησυχείτε για τη χρήση του JS για την παροχή συμβατότητας προς τα πίσω, μπορείτε απλώς να δηλώσετε το παρασκήνιο δύο φορές, αν και αυτό έχει επίσης μειονεκτήματα με τη μορφή πιθανής διπλής φόρτωσης πόρων (αυτό εξαρτάται από την υλοποίηση της επεξεργασίας css σε ένα συγκεκριμένο πρόγραμμα περιήγησης):

/* πολλαπλές εναλλακτικές ιστοσελίδες */ φόντο: #000 url(...) ...; /* Φοβερές πολλαπλές δηλώσεις BG που ξεπερνούν την πραγματικότητα και παραδίδουν την πηγή */ url φόντου(...), url(...), url(...), #000 url(...);

Εάν έχετε ήδη αρχίσει να σκέφτεστε τα Windows 8, να έχετε κατά νου ότι μπορείτε να χρησιμοποιήσετε πολλαπλά υπόβαθρα κατά την ανάπτυξη εφαρμογών σε στυλ metro, καθώς χρησιμοποιεί τον ίδιο κινητήρα με τον IE10.

ΥΣΤΕΡΟΓΡΑΦΟ. Επί του θέματος: Δεν μπορώ παρά να θυμηθώ το εκπληκτικό άρθρο για το .

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

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

Πολλές εικόνες φόντου

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

Blockimg( φόντο: url("img/img2.png"),/*ανώτατο φόντο και μετά διαδοχικά*/ url("img/img3.png"), url("img/img1.jpg"); θέση φόντου : 370px κέντρο, 120px 150px, κέντρο κέντρο;/*θέση εικόνων*/ background-repeat: no-repeat;/*repeat picture*/ background-color: #444;/*εάν απαιτείται χρώμα φόντου*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); περιθώριο: 100px auto 15px; μέγεθος πλαισίου: πλαίσιο-πλαίσιο; padding: 25px; πλάτος:700px; ελάχιστο ύψος: 300px; ) /*συντομευμένη έκδοση*/ . blockimg ( φόντο: url("img/img2.png") χωρίς επανάληψη 370 εικονοστοιχεία στο κέντρο, url("img/img3.png") χωρίς επανάληψη 120 εικονοστοιχεία 150 εικονοστοιχεία, url("img/img1.jpg") κέντρο χωρίς επανάληψη κέντρο ; περιθώριο: 100 εικονοστοιχεία αυτόματο 15 εικονοστοιχεία, μέγεθος κουτιού: πλαίσιο περιγράμματος, επένδυση: 25 εικονοστοιχεία, πλάτος: 700 εικονοστοιχεία, ελάχιστο ύψος: 300 εικονοστοιχεία, )

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

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

Και μια τελευταία λεπτομέρεια. Ολόκληρος ο κώδικας μπορεί να συντομευτεί χρησιμοποιώντας μόνο μία γενική ιδιότητα, το φόντο . Υπάρχει μια δεύτερη επιλογή στο παράδειγμα κώδικα που δείχνει πώς γίνεται αυτό.

Εικόνα φόντου μέσω ψευδοστοιχείου

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

Blockimg( background: url("img/img1.jpg") χωρίς επανάληψη;/*στοιχείο φόντο*/ position:relative;/* locationing area*/ margin: 200px auto 15px; box-sizing: border-box; padding: 25 εικονοστοιχεία; πλάτος: 700 εικονοστοιχεία; ελάχ. ύψος: 300 εικονοστοιχεία; ) .blockimg::before( φόντο: url("img/img1.png") κέντρο χωρίς επανάληψη; κάτω: 0; περιεχόμενο: ""; ύψος: 295 εικονοστοιχεία; αριστερά: 0; θέση: απόλυτη;/*απόλυτη τοποθέτηση*/ δεξιά: 0; επάνω: -150 εικονοστοιχεία; )

Εξήγηση.Στην πραγματικότητα, όλα είναι πολύ απλά. Ρυθμίζουμε το φόντο στο κύριο στοιχείο με τον συνηθισμένο τρόπο. Ακολουθεί η βασική θέση ιδιοκτησίας: σχετική? , που ορίζει την περιοχή για τη μετακίνηση ενός άλλου στοιχείου που βρίσκεται στο κύριο στοιχείο και έχει την ιδιότητα position:absolute; .

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