Doppio sfondo. Come creare più immagini di sfondo CSS. Codice di esempio: più immagini per lo sfondo
Quando abbiamo parlato della proprietà background-image all'inizio di questa sezione, non abbiamo menzionato una cosa: nei CSS3, puoi aggiungere più sfondi per un singolo elemento semplicemente elencandoli separati da virgole. Ciò è particolarmente utile quando un elemento con uno sfondo ha una larghezza o un'altezza variabile e lo sfondo deve adattarsi alle sue dimensioni.
Come impostare più sfondi in CSS
Ti mostreremo un esempio che potrebbe tornare utile nella pratica. Immaginiamo di dover inserire un blocco di testo in una cornice. La cornice è un file grafico in formato PNG:
In questo compito, non conosciamo l'altezza del testo - non sappiamo se il testo si adatterà completamente alla cornice o andrà oltre i suoi limiti. A causa di questo valore sconosciuto, non possiamo rischiare di utilizzare il disegno della cornice originale come sfondo. Ma con i CSS, possiamo forzare questo bordo ad allungarsi secondo necessità. Per fare ciò, dovrai dividere il disegno originale in un editor di grafica in tre parti - superiore, inferiore e centrale - e salvare ciascun file separatamente. Come questo:
Parte superiore del telaio
Fondo del telaio
Al centro del telaio
Faremo lo sfondo con l'immagine del centro del fotogramma che si ripete lungo l'asse. sì mentre la parte superiore e inferiore della cornice non verrà duplicata. Aggiungiamo tutti e tre gli sfondi all'elemento e annotiamo anche gli altri stili necessari:
Frame (immagine di sfondo: url (https://goo.gl/tKyzHt), / * parte superiore della cornice * / url (https://goo.gl/SUKymM), / * parte inferiore della cornice * / url (https: //goo.gl/Km7HVV); / * centro del bordo * / posizione-sfondo: centro in alto, / * posizione in cima al bordo * / centro in basso, / * posizione in fondo al bordo * / centro in alto; / * posizione al centro del bordo * / background -repeat: no-repeat, / * la parte superiore del frame non si ripete * / no-repeat, / * la parte inferiore del frame non si ripete * / repeat-y; / * la metà del frame viene ripetuto verticalmente * / background-size: contiene; / * qui tutti gli sfondi hanno lo stesso valore * / height: auto; / * l'altezza del blocco dipende dalla quantità di contenuto * / width: 400px; / * la larghezza del blocco è fisso * / padding: 30px; / * block padding * /)
Ogni sfondo deve essere separato da una virgola e solo dopo l'ultimo è presente un punto e virgola, che indica la fine della dichiarazione. Per comodità e una migliore leggibilità del codice, ti consigliamo di specificare ogni URL su una nuova riga.
Le immagini di sfondo sono disposte in livelli, uno sotto l'altro. Lo sfondo specificato per primo sarà nel livello superiore, il secondo sfondo sarà sotto il primo, il terzo sarà sotto i primi due. Ecco perché abbiamo posizionato l'immagine con il centro della cornice proprio alla fine, in modo che non si sovrapponga alle parti superiore e inferiore.
Successivamente nel codice, impostiamo le proprietà background-position e background-repeat per ogni sfondo (seguendo lo stesso ordine delle immagini di sfondo). Sì, hai indovinato: se questo è richiesto, puoi specificare i valori di altre proprietà di sfondo, separati da virgole. E se hai bisogno di applicare un valore a tutti gli sfondi, scrivilo come al solito (nel nostro caso, questa è la dimensione dello sfondo: contiene la proprietà).
Bene, diamo un'occhiata al risultato:
Come puoi vedere, la cornice è posizionata correttamente e ora inquadra magnificamente il contenuto del blocco. Cosa succede se aumentiamo la quantità di testo nel blocco? Noi guardiamo:
La parte centrale della nostra cornice è stata duplicata verticalmente il numero richiesto di volte, come se si allungasse in lunghezza e si adattasse al testo. Questo è l'effetto che non sarebbe stato possibile se avessimo usato un'immagine a frame singolo. Aggiungiamo ancora più testo per chiarezza:
Naturalmente, diversi sfondi possono essere utilizzati anche per altri scopi. Abbiamo mostrato solo un esempio tra tanti. Prova a immaginare la tua situazione e fai pratica usando il gruppo in background.
Usando la notazione abbreviata
La proprietà background accetta anche più valori. Nel caso di utilizzo di più sfondi, la notazione abbreviata può essere molto più comoda, perché è più difficile confondersi con essa. Riscriviamo il nostro codice per il framework:
Sfondo: url (https://goo.gl/tKyzHt) al centro in alto / non contiene ripetizioni, / * parte superiore del frame * / url (https://goo.gl/SUKymM) al centro in basso / non contiene ripetizioni, / * fondo del frame * / url (https://goo.gl/Km7HVV) centro in alto / contiene repeat-y; / * centro del fotogramma * /
Questa opzione sembra meno ingombrante e più facile da capire.
Compito
Aggiungi due immagini di sfondo per il blocco usando CSS3.
Soluzione
I browser moderni consentono di aggiungere un numero arbitrario di immagini di sfondo a un elemento, elencando le opzioni per ogni sfondo, separate da virgole. È sufficiente utilizzare lo sfondo della proprietà universale e specificare uno sfondo per primo e il secondo separato da virgole.
Ad esempio, considera la creazione di linee decorative verticali a sinistra e a destra di un blocco. Per fare ciò, in primo luogo, prepareremo immagini che dovrebbero essere ripetute verticalmente senza cuciture. Nella fig. 1 mostra un'immagine di sfondo che verrà visualizzata lungo il bordo sinistro, e in fig. 2 foto da visualizzare a destra.
Riso. 1. Immagine di sfondo per il bordo a sinistra
Riso. 2. Immagine di sfondo per il bordo a destra
Come elemento di blocco a cui viene aggiunto uno sfondo, di solito viene utilizzato il tag
Esempio 1. Due immagini di sfondo
HTML5 CSS3 IE Cr Op Sa Fx
Il risultato di questo esempio è mostrato in Fig. 3.
). Oggi parleremo un po' di un'altra caratteristica interessante: l'uso di più immagini in background.
Composizione di sfondi
Ci sono molte ragioni per cui, in generale, potrebbe essere necessario comporre diverse immagini in background, tra queste le più importanti sono:
- risparmio di traffico sulla dimensione delle immagini, se le singole immagini insieme pesano meno dell'immagine con livelli appiattiti e
- la necessità di un comportamento indipendente dei singoli livelli, ad esempio, quando si implementano effetti di parallasse.
L'approccio classico
Quindi, dobbiamo posizionare diverse immagini di sfondo una sopra l'altra. Come viene solitamente risolto questo compito? È molto semplice: viene creato un blocco per ogni immagine di sfondo e ad esso viene assegnata l'immagine di sfondo corrispondente. I blocchi sono nidificati l'uno nell'altro o posizionati in una riga con le regole di posizionamento appropriate. Ecco un semplice esempio:
Blocco con classe "pesca" all'interno "sirena" solo a scopo dimostrativo.
Ora alcuni stili:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (altezza: 300px; larghezza: 480px; posizione: relativa;) .sample1 .sea (sfondo: url (media / sea.png) repeat-x in alto a sinistra;) .sample1 .mermaid (sfondo: url (media / mermaid.svg) repeat-x in basso a sinistra;) .sample1 .fish (sfondo: url (media / fish.svg) no-repeat; altezza: 70px; larghezza: 100px; sinistra : 30px; in alto: 90px; posizione: assoluta;) .sample1 .fishing (sfondo: url (media / fishing.svg) no-repeat in alto a destra 10px;)
Risultato: 
In questo esempio, ci sono tre sfondi nidificati e un blocco con pesci, situato accanto ai blocchi "sfondo". In teoria, il pesce può essere spostato, ad esempio, utilizzando JavaScript o CSS3 Transizioni / Animazioni.
A proposito, questo esempio utilizza la nuova sintassi di posizionamento in background per ".fishing", definita anche nei CSS3:
sfondo: url (media / fishing.svg) senza ripetizione in alto a destra 10px;
Attualmente è supportato in IE9+ e Opera 11+, ma non è supportato in Firefox 10 e Chrome 16. Quindi gli utenti delle ultime due esplorazioni non saranno ancora in grado di catturare un pesce.
Sfondi multipli
Una nuova funzionalità aggiunta in CSS3 viene in soccorso: la capacità di definire più immagini di sfondo per un elemento contemporaneamente. Sembra così:
E gli stili corrispondenti:
.sample2 .sea (altezza: 300 px; larghezza: 480 px; posizione: relativa; immagine di sfondo: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / mare. png "); background-position: in alto a destra 10px, in basso a sinistra, in alto a sinistra; background-repeat: no-repeat, repeat-x, repeat-x;) .sample2 .fish (background: url (" media / fish.svg ") nessuna ripetizione; altezza: 70px; larghezza: 100px; sinistra: 30px; alto: 90px; posizione: assoluta;)
Per definire più immagini, è necessario utilizzare la regola dell'immagine di sfondo, elencando le singole immagini separate da virgole. Regole aggiuntive, anche un elenco, possono essere utilizzate per impostare il posizionamento, le ripetizioni e altri parametri per ciascuna delle immagini. Prestare attenzione all'ordine in cui sono elencate le immagini: i livelli sono elencati da sinistra a destra dall'alto verso il basso.
Il risultato è esattamente lo stesso: 
Una regola
Se non è necessario selezionare il pesce in un blocco separato per le successive manipolazioni, l'intera immagine può essere riscritta con una semplice regola:Stili:
.sample3 .sea (altezza: 300px; larghezza: 480px; posizione: relativa; immagine di sfondo: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), url (" media / sea.png "); background-position: in alto a destra 10px, in basso a sinistra, 30px 90px, in alto a sinistra; background-repeat: no-repeat, repeat-x;)
Non darò un'immagine con il risultato - credimi, coincide con le due immagini sopra. Ma presta nuovamente attenzione agli stili, in particolare alla "ripetizione in background" - secondo le specifiche, se manca parte dell'elenco alla fine, il browser deve ripetere l'elenco specificato tutte le volte necessarie per abbinare il numero di immagini nell'elenco.
In questo caso, è equivalente a questa descrizione:
background-repeat: no-repeat, repeat-x, no-ripeti, ripeti-x;
ancora più corto
Se ricordi CSS 2.1, definisce la capacità di descrivere le immagini di sfondo in modo conciso. Che ne dici di più immagini? È inoltre possibile:Sample4 .sea (altezza: 300px; larghezza: 480px; posizione: relativa; sfondo: url ("media / fishing.svg") in alto a destra 10px no-repeat, url ("media / mermaid.svg") in basso a sinistra repeat-x , url ("media / fish.svg") 30px 90px no-repeat, url ("media / sea.png") repeat-x;)
Ma nota che ora non puoi semplicemente saltare i valori (a meno che non coincidano con l'impostazione predefinita). A proposito, se vuoi impostare il colore dell'immagine di sfondo, questo deve essere fatto nell'ultimo livello.
Immagini dinamiche
Se la composizione è statica o dinamica non più che a seconda delle dimensioni del contenitore, più sfondi ovviamente semplificano il design della pagina. Ma cosa succede se hai bisogno di lavorare con singoli elementi della composizione indipendentemente da javascript (sposta, scorri, ecc.)?A proposito, ecco un esempio dalla vita reale: un tema con un dente di leone in Yandex:
Se scavi nel codice, vedrai qualcosa del genere:
...I blocchi con le classi "b-fluff-bg", "b-fluff__cloud" e "b-fluff__item" contengono immagini di sfondo che si sovrappongono. Inoltre, lo sfondo con le nuvole scorre costantemente e i denti di leone volano sullo schermo.
Può essere riscritto utilizzando più sfondi? In linea di principio sì, ma fornito 1) supporto per questa funzione nei browser di destinazione e ... 2) continua a leggere;)
Come faccio ad aggiungere altoparlanti a più sfondi? In una situazione del genere, risulta conveniente che nella vista interna il browser disperda i singoli parametri dell'immagine di sfondo secondo le regole appropriate. Ad esempio, per il posizionamento esiste una "posizione di sfondo" e per gli offset è sufficiente modificarla. Tuttavia, è previsto un addebito per l'utilizzo di più immagini: questa regola (e qualsiasi regola simile) deve elencare la posizione per tutti gli sfondi impostati per il blocco e non è possibile farlo in modo selettivo.
Per aggiungere animazione al nostro sfondo con i pesci, puoi usare il seguente codice:
$ (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; funzione animationLoop() (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480;
mermaidX += 0.5;
if(mermaidX >480) sirenaX = 0; pesceY = -10 + (10 * Costo matematico (t * 0,091)); fishX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px", + mermaidX + "px bottom", + fishesX + "px" + fishesY + "px, top left"; window.requestAnimFrame (animationLoop); ) animazioneLoop (); ));
dove
window.requestAnimFrame = (function () (return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function (callback) (60 );));)) ( );
E a proposito, le animazioni possono anche essere fatte tramite CSS3 Transitions / Animations, ma questo è un argomento per una discussione separata.
Parallasse e interattivo
Infine, con manovre simili, puoi facilmente aggiungere effetti di parallasse o interazione interattiva con lo sfondo:Più immagini di sfondo sono utili in tali scenari, poiché mentre stiamo parlando solo dello sfondo (e non del contenuto), il loro utilizzo consente di evitare di ingombrare il codice html e il DOM. Ma tutto ha un prezzo: non posso accedere ai singoli elementi della composizione per nome, ID, classe o qualsiasi altro parametro. Devo ricordare chiaramente l'ordine degli elementi nella composizione nel codice, e per ogni modifica di qualsiasi parametro di qualsiasi elemento, infatti, devo incollare la riga che descrive i valori di questo parametro per tutti gli elementi e aggiornarla per l'intera composizione.
Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px", + mermaidX + "px bottom", + fishesX + "px" + fishesY + "px, top left";
Sono sicuro che questo può essere racchiuso in un comodo codice javascript che si occuperà della virtualizzazione delle relazioni con i singoli livelli, lasciando il codice html della pagina il più pulito possibile.
Cosa c'è con la compatibilità?
Tutte le versioni moderne dei browser più diffusi, incluso IE9 +, supportano più immagini (puoi verificare, ad esempio, con caniuse).Puoi anche utilizzare Modernizr per fornire ai browser che non supportano più sfondi con alternative. Come ha scritto Chris Coyier nella sua nota sull'ordine dei livelli quando si utilizzano più sfondi, fare qualcosa del genere:
Multiplebgs body (/ * Impressionanti dichiarazioni multiple BG che trascendono la realtà e imsources pulcini * /) .no-multiplebgs body (/ * fallback laaaaaame * /)
Se sei confuso sull'utilizzo di JS per fornire la compatibilità con le versioni precedenti, puoi semplicemente dichiarare lo sfondo due volte, tuttavia, anche questo ha i suoi svantaggi sotto forma di un possibile doppio caricamento delle risorse (questo dipende dall'implementazione dell'elaborazione CSS in un particolare browser):
/ * fallback bg multiplo * / background: # 000 url (...) ...; / * Impressionanti dichiarazioni multiple di BG che trascendono la realtà e pulcini senza risorse * / background url (...), url (...), url (...), # 000 url (...);
Se hai già iniziato a pensare a Windows 8, tieni presente che puoi utilizzare più sfondi durante lo sviluppo di applicazioni in stile metro, poiché internamente viene utilizzato lo stesso motore di IE10.
p.s. Sul tema: non posso fare a meno di ricordare l'articolo fenomenale su
Diverse immagini di sfondo possono essere aggiunte a un elemento contemporaneamente tramite la singola proprietà di sfondo. Ciò ti consente di cavartela con un elemento per creare uno sfondo complesso o un'immagine, visualizzandolo più volte con impostazioni diverse. Tutte le immagini con i loro parametri sono elencate separate da virgole, allo stesso tempo l'immagine viene indicata per prima, che viene visualizzata sopra il resto delle immagini, e l'ultima, rispettivamente, è l'immagine più in basso. L'esempio 1 mostra come creare uno sfondo con tre immagini.
Esempio 1. Tre sfondi
Se hai bisogno di impostare separatamente alcune proprietà di stile per lo sfondo, come la dimensione dello sfondo come nell'esempio sopra, i parametri per ogni sfondo sono elencati separati da virgole. Il risultato di questo esempio è mostrato in Fig. 1.
Riso. 1. Sfondo con tre immagini
Immagini separate per lo sfondo consentono di modificare la loro posizione, nonché di animare, come mostrato nell'esempio 2.
Esempio 2. Sfondo animato
Consideriamo ora come utilizzare un'immagine per creare un blocco con una cornice (Fig. 2). La larghezza del blocco è fissa e l'altezza si estende in base al volume del contenuto del blocco.
Riso. 2. Cornice disegnata a mano
La figura mostra chiaramente le parti superiore e inferiore, che devono essere tagliate in un editor di grafica e posizionate orizzontalmente. La parte centrale è scelta in modo che si ripeta verticalmente senza cuciture. L'immagine ha uno schema ripetuto pronunciato, quindi non dovrebbero esserci difficoltà con la selezione. Di conseguenza, otterrai un'immagine così preparata (Fig. 3). La casella a scacchi denota la trasparenza, permette di impostare un colore di sfondo insieme alle immagini e di cambiarlo facilmente attraverso gli stili.
Riso. 3. Preparato per l'immagine di sfondo
Lo sfondo stesso viene visualizzato dalla proprietà background, imposta anche le coordinate del frammento desiderato. I parametri di ogni sfondo sono elencati separati da virgole e, in questo caso, il loro ordine è importante. Vogliamo che la parte superiore e quella inferiore del blocco non si sovrappongano, quindi le mettiamo per prime (esempio 3). Il colore di sfondo è specificato per ultimo.
Esempio 3. Più immagini di sfondo
Huitzilopochtli - "lo stregone colibrì", il dio della guerra e del sole.
Tezcatlipoca - "specchio fumante", il dio principale degli Aztechi.
Ad entrambi gli dei venivano fatti sacrifici umani.
Il primo sfondo disegna il bordo superiore del riquadro, il secondo quello inferiore e il terzo i bordi verticali. L'ultimo è il colore che è visibile nella parte centrale trasparente del blocco (Fig. 4).
). Oggi parleremo un po' di un'altra caratteristica interessante: l'uso di più immagini in background.
Composizione di sfondi
Ci sono molte ragioni per cui, in generale, potrebbe essere necessario comporre diverse immagini in background, tra queste le più importanti sono:
- risparmio di traffico sulla dimensione delle immagini, se le singole immagini insieme pesano meno dell'immagine con livelli appiattiti e
- la necessità di un comportamento indipendente dei singoli livelli, ad esempio, quando si implementano effetti di parallasse.
L'approccio classico
Quindi, dobbiamo posizionare diverse immagini di sfondo una sopra l'altra. Come viene solitamente risolto questo compito? È molto semplice: viene creato un blocco per ogni immagine di sfondo e ad esso viene assegnata l'immagine di sfondo corrispondente. I blocchi sono nidificati l'uno nell'altro o posizionati in una riga con le regole di posizionamento appropriate. Ecco un semplice esempio:
Blocco con classe "pesca" all'interno "sirena" solo a scopo dimostrativo.
Ora alcuni stili:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (altezza: 300px; larghezza: 480px; posizione: relativa;) .sample1 .sea (sfondo: url (media / sea.png) repeat-x in alto a sinistra;) .sample1 .mermaid (sfondo: url (media / mermaid.svg) repeat-x in basso a sinistra;) .sample1 .fish (sfondo: url (media / fish.svg) no-repeat; altezza: 70px; larghezza: 100px; sinistra : 30px; in alto: 90px; posizione: assoluta;) .sample1 .fishing (sfondo: url (media / fishing.svg) no-repeat in alto a destra 10px;)
Risultato:
In questo esempio, ci sono tre sfondi nidificati e un blocco con pesci, situato accanto ai blocchi "sfondo". In teoria, il pesce può essere spostato, ad esempio, utilizzando JavaScript o CSS3 Transizioni / Animazioni.
A proposito, questo esempio utilizza la nuova sintassi di posizionamento in background per ".fishing", definita anche nei CSS3:
sfondo: url (media / fishing.svg) senza ripetizione in alto a destra 10px;
Attualmente è supportato in IE9+ e Opera 11+, ma non è supportato in Firefox 10 e Chrome 16. Quindi gli utenti delle ultime due esplorazioni non saranno ancora in grado di catturare un pesce.
Sfondi multipli
Una nuova funzionalità aggiunta in CSS3 viene in soccorso: la capacità di definire più immagini di sfondo per un elemento contemporaneamente. Sembra così:
E gli stili corrispondenti:
.sample2 .sea (altezza: 300 px; larghezza: 480 px; posizione: relativa; immagine di sfondo: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / mare. png "); background-position: in alto a destra 10px, in basso a sinistra, in alto a sinistra; background-repeat: no-repeat, repeat-x, repeat-x;) .sample2 .fish (background: url (" media / fish.svg ") nessuna ripetizione; altezza: 70px; larghezza: 100px; sinistra: 30px; alto: 90px; posizione: assoluta;)
Per definire più immagini, è necessario utilizzare la regola dell'immagine di sfondo, elencando le singole immagini separate da virgole. Regole aggiuntive, anche un elenco, possono essere utilizzate per impostare il posizionamento, le ripetizioni e altri parametri per ciascuna delle immagini. Prestare attenzione all'ordine in cui sono elencate le immagini: i livelli sono elencati da sinistra a destra dall'alto verso il basso.
Il risultato è esattamente lo stesso:
Una regola
Se non è necessario selezionare il pesce in un blocco separato per le successive manipolazioni, l'intera immagine può essere riscritta con una semplice regola:Stili:
.sample3 .sea (altezza: 300px; larghezza: 480px; posizione: relativa; immagine di sfondo: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), url (" media / sea.png "); background-position: in alto a destra 10px, in basso a sinistra, 30px 90px, in alto a sinistra; background-repeat: no-repeat, repeat-x;)
Non darò un'immagine con il risultato - credimi, coincide con le due immagini sopra. Ma presta nuovamente attenzione agli stili, in particolare alla "ripetizione in background" - secondo le specifiche, se manca parte dell'elenco alla fine, il browser deve ripetere l'elenco specificato tutte le volte necessarie per abbinare il numero di immagini nell'elenco.
In questo caso, è equivalente a questa descrizione:
background-repeat: no-repeat, repeat-x, no-ripeti, ripeti-x;
ancora più corto
Se ricordi CSS 2.1, definisce la capacità di descrivere le immagini di sfondo in modo conciso. Che ne dici di più immagini? È inoltre possibile:Sample4 .sea (altezza: 300px; larghezza: 480px; posizione: relativa; sfondo: url ("media / fishing.svg") in alto a destra 10px no-repeat, url ("media / mermaid.svg") in basso a sinistra repeat-x , url ("media / fish.svg") 30px 90px no-repeat, url ("media / sea.png") repeat-x;)
Ma nota che ora non puoi semplicemente saltare i valori (a meno che non coincidano con l'impostazione predefinita). A proposito, se vuoi impostare il colore dell'immagine di sfondo, questo deve essere fatto nell'ultimo livello.
Immagini dinamiche
Se la composizione è statica o dinamica non più che a seconda delle dimensioni del contenitore, più sfondi ovviamente semplificano il design della pagina. Ma cosa succede se hai bisogno di lavorare con singoli elementi della composizione indipendentemente da javascript (sposta, scorri, ecc.)?A proposito, ecco un esempio dalla vita reale: un tema con un dente di leone in Yandex:
Se scavi nel codice, vedrai qualcosa del genere:
...I blocchi con le classi "b-fluff-bg", "b-fluff__cloud" e "b-fluff__item" contengono immagini di sfondo che si sovrappongono. Inoltre, lo sfondo con le nuvole scorre costantemente e i denti di leone volano sullo schermo.
Può essere riscritto utilizzando più sfondi? In linea di principio sì, ma fornito 1) supporto per questa funzione nei browser di destinazione e ... 2) continua a leggere;)
Come faccio ad aggiungere altoparlanti a più sfondi? In una situazione del genere, risulta conveniente che nella vista interna il browser disperda i singoli parametri dell'immagine di sfondo secondo le regole appropriate. Ad esempio, per il posizionamento esiste una "posizione di sfondo" e per gli offset è sufficiente modificarla. Tuttavia, è previsto un addebito per l'utilizzo di più immagini: questa regola (e qualsiasi regola simile) deve elencare la posizione per tutti gli sfondi impostati per il blocco e non è possibile farlo in modo selettivo.
Per aggiungere animazione al nostro sfondo con i pesci, puoi usare il seguente codice:
$ (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; funzione animationLoop() (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480;
mermaidX += 0.5;
if(mermaidX >480) sirenaX = 0; pesceY = -10 + (10 * Costo matematico (t * 0,091)); fishX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px", + mermaidX + "px bottom", + fishesX + "px" + fishesY + "px, top left"; window.requestAnimFrame (animationLoop); ) animazioneLoop (); ));
dove
window.requestAnimFrame = (function () (return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function (callback) (60 );));)) ( );
E a proposito, le animazioni possono anche essere fatte tramite CSS3 Transitions / Animations, ma questo è un argomento per una discussione separata.
Parallasse e interattivo
Infine, con manovre simili, puoi facilmente aggiungere effetti di parallasse o interazione interattiva con lo sfondo:Più immagini di sfondo sono utili in tali scenari, poiché mentre stiamo parlando solo dello sfondo (e non del contenuto), il loro utilizzo consente di evitare di ingombrare il codice html e il DOM. Ma tutto ha un prezzo: non posso accedere ai singoli elementi della composizione per nome, ID, classe o qualsiasi altro parametro. Devo ricordare chiaramente l'ordine degli elementi nella composizione nel codice, e per ogni modifica di qualsiasi parametro di qualsiasi elemento, infatti, devo incollare la riga che descrive i valori di questo parametro per tutti gli elementi e aggiornarla per l'intera composizione.
Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px", + mermaidX + "px bottom", + fishesX + "px" + fishesY + "px, top left";
Sono sicuro che questo può essere racchiuso in un comodo codice javascript che si occuperà della virtualizzazione delle relazioni con i singoli livelli, lasciando il codice html della pagina il più pulito possibile.
Cosa c'è con la compatibilità?
Tutte le versioni moderne dei browser più diffusi, incluso IE9 +, supportano più immagini (puoi verificare, ad esempio, con caniuse).Puoi anche utilizzare Modernizr per fornire ai browser che non supportano più sfondi con alternative. Come ha scritto Chris Coyier nella sua nota sull'ordine dei livelli quando si utilizzano più sfondi, fare qualcosa del genere:
Multiplebgs body (/ * Impressionanti dichiarazioni multiple BG che trascendono la realtà e imsources pulcini * /) .no-multiplebgs body (/ * fallback laaaaaame * /)
Se sei confuso sull'utilizzo di JS per fornire la compatibilità con le versioni precedenti, puoi semplicemente dichiarare lo sfondo due volte, tuttavia, anche questo ha i suoi svantaggi sotto forma di un possibile doppio caricamento delle risorse (questo dipende dall'implementazione dell'elaborazione CSS in un particolare browser):
/ * fallback bg multiplo * / background: # 000 url (...) ...; / * Impressionanti dichiarazioni multiple di BG che trascendono la realtà e pulcini senza risorse * / background url (...), url (...), url (...), # 000 url (...);
Se hai già iniziato a pensare a Windows 8, tieni presente che puoi utilizzare più sfondi durante lo sviluppo di applicazioni in stile metro, poiché internamente viene utilizzato lo stesso motore di IE10.
p.s. Sul tema: non posso fare a meno di ricordare l'articolo fenomenale su.
Esempi di funzione jQuery setTimeout () Javascript impedisce a più timer di eseguire setinterval contemporaneamente
Circuiti radioamatori fai da te e prodotti fatti in casa
Ritaglia il testo su una o più righe in altezza con l'aggiunta di ellissi Aggiunta di una sfumatura al testo