Sfondo multiplo. Come creare più immagini di sfondo CSS. Miglioramenti progressivi e browser legacy

L'uso degli pseudo-elementi CSS 2.1 ti consente di avere 3 livelli di sfondo, 2 immagini a dimensione fissa e più tratti complessi su un singolo elemento HTML. Questo metodo espande significativamente le capacità di progettazione delle pagine web per tutti i browser che supportano gli pseudoelementi CSS 2.1 con posizionamento. Nessun supporto CSS3 richiesto.

Essenzialmente, creare e lavorare con pseudo-elementi CSS (:before e :after) è simile a come si lavora con elementi HTML nidificati all'interno di un elemento di destinazione. Ma con un vantaggio significativo: tutto viene fatto al di fuori della semantica, senza utilizzare elementi HTML annidati.

Per creare più sfondi e/o tratti, gli pseudo-elementi vengono fatti scorrere dietro il contenuto e ancorati nel punto desiderato nell'elemento HTML utilizzando il posizionamento assoluto.

Lo pseudo elemento non contiene alcun contenuto reale ed è posizionato in modo assoluto. In questo modo può essere allungato su qualsiasi area dell'elemento "genitore" senza alterarne il contenuto. Per fare ciò, puoi utilizzare una combinazione delle proprietà top , right , bottom , left , width e Height .

Che effetti puoi ottenere?

Usando un solo elemento puoi ottenere parallasse, sfondi multipli (sia colori che immagini), immagini di sfondo ritagliate, sostituzione di immagini, elementi espandibili con immagini come tratti, colonne artificiali flessibili, immagini che si estendono oltre i confini dell'elemento, tratti multipli e altri popolari quegli effetti che in genere utilizzano tag immagine e/o markup HTML aggiuntivo.

Nelle pagine demo puoi vedere l'implementazione di diversi effetti di progettazione di pagine Web popolari utilizzando questa tecnica.

Inoltre, puoi utilizzare le modifiche allo stile per :hover per ottenere effetti più complessi.

Codice di esempio: più immagini di sfondo

Utilizzando questa tecnica, puoi riprodurre l'effetto di parallasse con più immagini di sfondo (come utilizzato sul sito Silverback), utilizzando un solo elemento HTML.

L'elemento ottiene il proprio sfondo e il riempimento richiesto. Il posizionamento relativo di un elemento funge da punto di riferimento per il posizionamento assoluto degli pseudo-elementi. Un valore di indice z positivo consente di regolare la posizione degli pseudo-elementi lungo l'asse z.

#silverback ( posizione:relativa; z-index:1; larghezza minima:200px; altezza minima:200px; imbottitura:120px 200px 50px; sfondo:#d3ff99 url(vines-back.png) -10% 0 ripetizione-x )

Entrambi gli pseudo-elementi sono posizionati in modo assoluto e posti ai lati dell'elemento. Un valore z-index pari a -1 posiziona lo pseudo-elemento dietro il livello contenuto. In questo modo, gli pseudo-elementi vengono posizionati sopra lo sfondo e il contorno dell'elemento, ma tutto il contenuto rimane selezionabile e sensibile ai clic del mouse.

#silverback:prima, #silverback:dopo ( posizione:assoluta; z-index:-1; superiore:0; sinistra:0; destra:0; inferiore:0; imbottitura-superiore:100px; )

Ogni pseudo-elemento ha una serie ripetuta di immagini di sfondo. Per riprodurre l'effetto di parallasse non è necessario nient'altro.

La proprietà content consente di aggiungere un'immagine come contenuto generato. Avere due pseudo elementi ti consente di aggiungere 2 immagini aggiuntive all'elemento. Possono essere posizionati approssimativamente in pseudo-elementi utilizzando altre proprietà come l'allineamento del testo e il riempimento.

#silverback:prima ( contenuto:url(gorilla-1.png); riempimento-sinistra:3%; allineamento testo:sinistra; sfondo:url trasparente(vines-mid.png) 300% 0 ripetizione-x; ) #silverback :dopo ( contenuto:url(gorilla-2.png); riempimento-destra:3%; allineamento testo:destra; sfondo:url trasparente(vines-front.png) 70% 0 ripetizione-x; )

Codice di esempio: colonne artificiali flessibili

Un'altra applicazione della tecnica descritta è quella di creare colonne flessibili di uguale altezza senza l'utilizzo di immagini o elementi aggiuntivi correlati.

Il markup HTML è molto semplice. Utilizzo delle classi per ogni elemento div invece dei selettori CSS 2.1, che non sono supportati da IE6. Se non è necessario supportare IE6, è possibile utilizzare i selettori.

Il contenitore ha una larghezza percentuale, un posizionamento relativo e un valore della proprietà z-index positivo. L'uso di overflow:hidden consente a un elemento di racchiudere il contenuto dei suoi figli mobili e di nascondere gli pseudo-elementi sovrastanti. Il colore di sfondo fornisce il colore per una delle colonne.

#faux ( posizione:relativa; indice z:1; larghezza:80%; margine:0 automatico; overflow:nascosto; sfondo:#ffaf00; )

L'utilizzo del posizionamento relativo per gli elementi discendenti di div consente di controllare l'ordine delle colonne indipendentemente dal loro aspetto nel layout originale.

#faux div ( posizione:relativa; float:sinistra; larghezza:30%; ) #faux .main (sinistra:35%) #faux .supp1 (sinistra:-28,5%) #faux .supp2 (sinistra:8,5%)

Le altre due colonne vengono create utilizzando pseudo-elementi con sfondi. Se necessario, puoi utilizzare le immagini come sfondi.

#faux:prima, #faux:dopo ( contenuto:""; posizione:assoluta; z-index:-1; sopra:0; destra:0; sotto:0; sinistra:33,333%; sfondo:#f9b6ff; ) # finto:dopo (sinistra:66,667%; sfondo:#79daff;)

Codice di esempio: tratto multiplo

I tratti multipli sono organizzati quasi allo stesso modo. Il suo utilizzo consente di abbandonare le immagini mantenendo l'effetto.

L'elemento deve avere un posizionamento relativo e una larghezza di riempimento sufficiente a contenere il tratto extra che verrà creato dagli pseudo-elementi.

#borders ( posizione:relativa; z-index:1; imbottitura:30px; bordo:5px solido #f00; sfondo:#ff9600; )

Lo pseudo-elemento è posizionato alla distanza appropriata dal bordo dell'elemento, posizionato sotto il livello del contenuto utilizzando uno z-index negativo e dotato del tratto e dello sfondo di cui ha bisogno.

#bordi:prima ( contenuto:""; posizione:assoluta; z-index:-1; superiore:5px; sinistra:5px; destra:5px; inferiore:5px; bordo:5px solido #ffea00; sfondo:#4aa929; ) #borders:dopo ( contenuto:""; posizione:assoluta; z-index:-1; superiore:15px; sinistra:15px; destra:15px; inferiore:15px; bordo:5px solido #00b4ff; sfondo:#fff; )

Miglioramenti progressivi e browser legacy

IE6 e IE7 non supportano gli pseudo-elementi CSS 2.1 e ignorano tutte le dichiarazioni:before e:after. Non apporteranno tutti i miglioramenti, ma manterranno le funzionalità principali.

Attenzione quando si utilizza Firefox 3.0

Firefox 3.0 supporta gli pseudo-elementi CSS 2.1, ma non ne supporta il posizionamento. A causa di questo supporto parziale, gli effetti che dipendono esplicitamente dalle proprietà di larghezza o altezza degli pseudo-elementi possono sembrare terribili. Non esiste un modo alternativo per Firefox 3.0 se si utilizzano le proprietà larghezza o altezza. A volte è possibile ottenere alcuni miglioramenti aggiungendo display:block agli stili dello pseudo elemento.

Prima di utilizzare tecniche che richiedono il posizionamento di pseudo-elementi utilizzando le proprietà larghezza o altezza, è necessario considerare quanto sia importante supportare Firefox 3.0 e la percentuale di utenti che utilizzano quel browser.

Questo problema viene completamente risolto nelle applicazioni che utilizzano il posizionamento assoluto anziché le proprietà di larghezza o altezza.

Miglioramenti con CSS3

Tutti gli esempi implementati in questo articolo possono essere migliorati utilizzando CSS3.

Utilizzando border-radius , rgba , trasforma le proprietà e più sfondi CSS3 in combinazione con pseudo-elementi può aprire la possibilità di implementare effetti più complessi. Tuttavia, attualmente non esistono browser che supportano le animazioni CSS3 o le trasformazioni per pseudoelementi.

Il futuro: pseudo-elementi CSS3

I miglioramenti suggeriti agli pseudo-elementi CSS3 (vedi il documento Modulo contenuto generato e sostituito CSS3) includono pseudo-elementi associati (::before::before), pseudo-elementi multipli (::after(2)), avvolgimento di pseudo-elementi ( : :outside) e la possibilità di inserire pseudo-elementi per le parti caricate del documento (::alternate).

Tali cambiamenti apriranno possibilità virtualmente illimitate per creare tutti i tipi di effetti utilizzando un solo elemento e una serie di pseudo-elementi.

). Oggi parleremo un po' di un'altra caratteristica interessante: l'utilizzo di più immagini sullo sfondo.

Composizione dello sfondo

Ci sono molti motivi per cui potresti voler comporre più immagini sullo sfondo, i più importanti dei quali sono:

• risparmiare traffico sulla dimensione delle immagini se le singole immagini pesano meno in totale di un'immagine con livelli appiattiti e
• la necessità di un comportamento indipendente dei singoli strati, ad esempio, quando si implementano gli effetti di parallasse.

Potrebbero esserci altri motivi ragionevoli :)

Approccio classico

Quindi dobbiamo posizionare diverse immagini di sfondo una sopra l'altra. Come si risolve solitamente questo problema? È molto semplice: per ogni immagine di sfondo viene creato un blocco a cui viene assegnata la corrispondente immagine di sfondo. I blocchi vengono annidati uno dentro l'altro o posizionati in fila con regole di posizionamento appropriate. Ecco un semplice esempio:

Un blocco con la classe "pesca" all'interno di "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) ripeti-x in alto a sinistra; ) .sample1 .mermaid ( sfondo: url(media/mermaid.svg) ripeti-x in basso a sinistra; ) .sample1 .fish ( sfondo: url(media/fish.svg) no-repeat; altezza:70px; larghezza:100px; sinistra : 30px; superiore: 90px; posizione: assoluta ) .sample1 .fishing ( sfondo: url(media/fishing.svg) no-repeat in alto a destra; )

Risultato:

In questo esempio, ci sono tre sfondi nidificati e un blocco con pesci situato accanto ai blocchi “sfondo”. In teoria, i pesci possono essere spostati, ad esempio, utilizzando JavaScript o transizioni/animazioni CSS3.

A proposito, questo esempio per ".fishing" utilizza la nuova sintassi per il posizionamento in background, definita anche nei CSS3:
sfondo: url(media/fishing.svg) nessuna 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 degli ultimi due browser non saranno ancora in grado di catturare i pesci.

Sfondi multipli

Una nuova opzione aggiunta ai CSS3 viene in soccorso: la possibilità di definire più immagini di sfondo per un elemento. Sembra questo:

E gli stili corrispondenti:
.sample2 .sea ( altezza:300px; larghezza:480px; posizione: relativa; immagine di sfondo: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); posizione dello sfondo: in alto a destra 10px, in basso a sinistra, in alto a sinistra; ripetizione dello sfondo: no-repeat, ripeti-x, ripeti-x ; ) .sample2 .fish ( background: url("media/fish.svg ") nessuna ripetizione; altezza:70px; larghezza:100px; sinistra: 30px; superiore: 90px; posizione: assoluta; )
Per definire più immagini è necessario utilizzare la regola background-image, elencando le singole immagini separate da virgole. Regole aggiuntive, anche un elenco, possono impostare posizionamento, ripetizioni e altri parametri per ciascuna immagine. Nota l'ordine in cui sono elencate le immagini: i livelli sono elencati da sinistra a destra, dal più alto al più basso.

Il risultato è esattamente lo stesso:

Una regola

Se non è necessario separare i pesci 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"); posizione dello sfondo: in alto a destra 10px, in basso a sinistra, 30px 90px, in alto a sinistra; ripetizione dello sfondo: no-repeat, Repeat-x ; )

Non mostrerò un'immagine del risultato: credimi, coincide con le due immagini sopra. Ma presta nuovamente attenzione agli stili, in particolare a "ripetizione sfondo": secondo le specifiche, se manca parte dell'elenco alla fine, il browser deve ripetere l'elenco specificato il numero di volte richiesto per corrispondere al numero di immagini nella lista.

In questo caso, equivale a questa descrizione:
ripetizione in background: nessuna ripetizione, ripetizione-x, no-ripeti, ripeti-x;

Ancora più breve

Se ricordi il CSS 2.1, definiva la capacità di descrivere le immagini di sfondo in forma breve. Che ne dici di più immagini? Questo è anche possibile:

Esempio4 .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 ripeti-x , url("media/fish.svg") 30px 90px nessuna ripetizione, url("media/sea.png") ripeti-x )

Ma tieni presente che ora non puoi semplicemente saltare i valori (a meno che non corrispondano al valore predefinito). A proposito, se vuoi impostare il colore dell'immagine di sfondo, devi farlo nell'ultimo livello.

Immagini dinamiche

Se la composizione è statica o al massimo dinamica a seconda delle dimensioni del contenitore, allora più sfondi semplificano ovviamente il design della pagina. Ma cosa succede se devi lavorare con i singoli elementi della composizione indipendentemente da Javascript (sposta, scorri, ecc.)?

A proposito, ecco un esempio dalla vita: un tema con un dente di leone in Yandex:


Se guardi il 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 tra loro. Inoltre, lo sfondo con le nuvole scorre costantemente e i denti di leone volano sullo schermo.

È possibile riscriverlo utilizzando più sfondi? In linea di principio sì, ma soggetto a 1) supporto per questa funzionalità nei browser di destinazione e... 2) continua a leggere;)

Come aggiungere dinamica a più sfondi? In una situazione del genere risulta conveniente che nella rappresentazione interna il browser distribuisca i singoli parametri delle immagini di sfondo secondo le regole appropriate. Ad esempio, per il posizionamento c'è la "posizione dello sfondo", e per i turni è sufficiente modificare solo questa. Tuttavia, c'è un costo per l'utilizzo di più immagini: questa regola (e qualsiasi altra simile) richiede che tu elenchi la posizione di tutti gli sfondi definiti per il tuo blocco e non puoi farlo in modo selettivo.

Per aggiungere animazione al nostro sfondo di pesci, puoi utilizzare 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 animazioneLoop() ( pesciY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--pesciX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenaX = 0; pesceY = -10 + (10 * Math.cos(t * 0,091)); pesceX = 10 + (5 * Math.sin(t * 0,07)); sea.style. backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, in alto a sinistra"; window.requestAnimFrame(animationLoop); ) animazioneLoop(); ));
Dove
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60 )); ))();

E comunque, le animazioni possono essere realizzate anche utilizzando Transizioni/Animazioni CSS3, ma questo è un argomento per una discussione separata.

Parallasse e interattività

Infine, manovre simili possono facilmente aggiungere effetti di parallasse o interazione interattiva con lo sfondo:

Immagini di sfondo multiple sono utili in tali scenari, poiché mentre parliamo solo dello sfondo (e non del contenuto), il loro utilizzo ci consente di evitare di sporcare 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 esplicitamente l'ordine degli elementi nella composizione nel codice, e per ogni modifica di qualsiasi parametro di qualsiasi elemento, infatti, devo incollare insieme una 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, in alto a sinistra";

Sono sicuro che questo possa essere racchiuso in un comodo codice javascript, che si occuperà della virtualizzazione delle relazioni con i singoli layer, lasciando il codice html della pagina il più pulito possibile.

E la compatibilità?

Tutte le versioni moderne dei browser più diffusi, incluso IE9+, supportano più immagini (puoi controllare, ad esempio, Caniuse).

Puoi anche utilizzare Modernizr per fornire soluzioni alternative per i browser che non supportano più sfondi. Come ha scritto Chris Coyier nel suo post sull'ordine dei livelli quando si utilizzano più sfondi, fai qualcosa del genere:

Multiplebgs body ( /* Fantastiche dichiarazioni BG multiple che trascendono la realtà e le ragazze senza origine */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Se sei preoccupato di utilizzare JS per fornire compatibilità con le versioni precedenti, puoi semplicemente dichiarare background due volte, sebbene ciò abbia anche i suoi svantaggi sotto forma di possibile doppio caricamento delle risorse (dipende dall'implementazione dell'elaborazione CSS in un particolare browser):

/* più bg fallback */ background: #000 url(...) ...; /* Fantastiche dichiarazioni BG multiple che trascendono la realtà e le ragazze senza risorse */ background url(...), url(...), url(...), #000 url(...);

Se hai già iniziato a pensare a Windows 8, tieni presente che puoi utilizzare più sfondi quando sviluppi applicazioni in stile metro, poiché utilizza lo stesso motore di IE10.

P.s. In tema: non posso fare a meno di ricordare il fenomenale articolo su

). Oggi parleremo un po' di un'altra caratteristica interessante: l'utilizzo di più immagini sullo sfondo.

Composizione dello sfondo

Ci sono molti motivi per cui potresti voler comporre più immagini sullo sfondo, i più importanti dei quali sono:

• risparmiare traffico sulla dimensione delle immagini se le singole immagini pesano meno in totale di un'immagine con livelli appiattiti e
• la necessità di un comportamento indipendente dei singoli strati, ad esempio, quando si implementano gli effetti di parallasse.

Potrebbero esserci altri motivi ragionevoli :)

Approccio classico

Quindi dobbiamo posizionare diverse immagini di sfondo una sopra l'altra. Come si risolve solitamente questo problema? È molto semplice: per ogni immagine di sfondo viene creato un blocco a cui viene assegnata la corrispondente immagine di sfondo. I blocchi vengono annidati uno dentro l'altro o posizionati in fila con regole di posizionamento appropriate. Ecco un semplice esempio:

Un blocco con la classe "pesca" all'interno di "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) ripeti-x in alto a sinistra; ) .sample1 .mermaid ( sfondo: url(media/mermaid.svg) ripeti-x in basso a sinistra; ) .sample1 .fish ( sfondo: url(media/fish.svg) no-repeat; altezza:70px; larghezza:100px; sinistra : 30px; superiore: 90px; posizione: assoluta ) .sample1 .fishing ( sfondo: url(media/fishing.svg) no-repeat in alto a destra; )

Risultato:

In questo esempio, ci sono tre sfondi nidificati e un blocco con pesci situato accanto ai blocchi “sfondo”. In teoria, i pesci possono essere spostati, ad esempio, utilizzando JavaScript o transizioni/animazioni CSS3.

A proposito, questo esempio per ".fishing" utilizza la nuova sintassi per il posizionamento in background, definita anche nei CSS3:
sfondo: url(media/fishing.svg) nessuna 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 degli ultimi due browser non saranno ancora in grado di catturare i pesci.

Sfondi multipli

Una nuova opzione aggiunta ai CSS3 viene in soccorso: la possibilità di definire più immagini di sfondo per un elemento. Sembra questo:

E gli stili corrispondenti:
.sample2 .sea ( altezza:300px; larghezza:480px; posizione: relativa; immagine di sfondo: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); posizione dello sfondo: in alto a destra 10px, in basso a sinistra, in alto a sinistra; ripetizione dello sfondo: no-repeat, ripeti-x, ripeti-x ; ) .sample2 .fish ( background: url("media/fish.svg ") nessuna ripetizione; altezza:70px; larghezza:100px; sinistra: 30px; superiore: 90px; posizione: assoluta; )
Per definire più immagini è necessario utilizzare la regola background-image, elencando le singole immagini separate da virgole. Regole aggiuntive, anche un elenco, possono impostare posizionamento, ripetizioni e altri parametri per ciascuna immagine. Nota l'ordine in cui sono elencate le immagini: i livelli sono elencati da sinistra a destra, dal più alto al più basso.

Il risultato è esattamente lo stesso:

Una regola

Se non è necessario separare i pesci 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"); posizione dello sfondo: in alto a destra 10px, in basso a sinistra, 30px 90px, in alto a sinistra; ripetizione dello sfondo: no-repeat, Repeat-x ; )

Non mostrerò un'immagine del risultato: credimi, coincide con le due immagini sopra. Ma presta nuovamente attenzione agli stili, in particolare a "ripetizione sfondo": secondo le specifiche, se manca parte dell'elenco alla fine, il browser deve ripetere l'elenco specificato il numero di volte richiesto per corrispondere al numero di immagini nella lista.

In questo caso, equivale a questa descrizione:
ripetizione in background: nessuna ripetizione, ripetizione-x, no-ripeti, ripeti-x;

Ancora più breve

Se ricordi il CSS 2.1, definiva la capacità di descrivere le immagini di sfondo in forma breve. Che ne dici di più immagini? Questo è anche possibile:

Esempio4 .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 ripeti-x , url("media/fish.svg") 30px 90px nessuna ripetizione, url("media/sea.png") ripeti-x )

Ma tieni presente che ora non puoi semplicemente saltare i valori (a meno che non corrispondano al valore predefinito). A proposito, se vuoi impostare il colore dell'immagine di sfondo, devi farlo nell'ultimo livello.

Immagini dinamiche

Se la composizione è statica o al massimo dinamica a seconda delle dimensioni del contenitore, allora più sfondi semplificano ovviamente il design della pagina. Ma cosa succede se devi lavorare con i singoli elementi della composizione indipendentemente da Javascript (sposta, scorri, ecc.)?

A proposito, ecco un esempio dalla vita: un tema con un dente di leone in Yandex:


Se guardi il 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 tra loro. Inoltre, lo sfondo con le nuvole scorre costantemente e i denti di leone volano sullo schermo.

È possibile riscriverlo utilizzando più sfondi? In linea di principio sì, ma soggetto a 1) supporto per questa funzionalità nei browser di destinazione e... 2) continua a leggere;)

Come aggiungere dinamica a più sfondi? In una situazione del genere risulta conveniente che nella rappresentazione interna il browser distribuisca i singoli parametri delle immagini di sfondo secondo le regole appropriate. Ad esempio, per il posizionamento c'è la "posizione dello sfondo", e per i turni è sufficiente modificare solo questa. Tuttavia, c'è un costo per l'utilizzo di più immagini: questa regola (e qualsiasi altra simile) richiede che tu elenchi la posizione di tutti gli sfondi definiti per il tuo blocco e non puoi farlo in modo selettivo.

Per aggiungere animazione al nostro sfondo di pesci, puoi utilizzare 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 animazioneLoop() ( pesciY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--pesciX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenaX = 0; pesceY = -10 + (10 * Math.cos(t * 0,091)); pesceX = 10 + (5 * Math.sin(t * 0,07)); sea.style. backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, in alto a sinistra"; window.requestAnimFrame(animationLoop); ) animazioneLoop(); ));
Dove
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60 )); ))();

E comunque, le animazioni possono essere realizzate anche utilizzando Transizioni/Animazioni CSS3, ma questo è un argomento per una discussione separata.

Parallasse e interattività

Infine, manovre simili possono facilmente aggiungere effetti di parallasse o interazione interattiva con lo sfondo:

Immagini di sfondo multiple sono utili in tali scenari, poiché mentre parliamo solo dello sfondo (e non del contenuto), il loro utilizzo ci consente di evitare di sporcare 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 esplicitamente l'ordine degli elementi nella composizione nel codice, e per ogni modifica di qualsiasi parametro di qualsiasi elemento, infatti, devo incollare insieme una 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, in alto a sinistra";

Sono sicuro che questo possa essere racchiuso in un comodo codice javascript, che si occuperà della virtualizzazione delle relazioni con i singoli layer, lasciando il codice html della pagina il più pulito possibile.

E la compatibilità?

Tutte le versioni moderne dei browser più diffusi, incluso IE9+, supportano più immagini (puoi controllare, ad esempio, Caniuse).

Puoi anche utilizzare Modernizr per fornire soluzioni alternative per i browser che non supportano più sfondi. Come ha scritto Chris Coyier nel suo post sull'ordine dei livelli quando si utilizzano più sfondi, fai qualcosa del genere:

Multiplebgs body ( /* Fantastiche dichiarazioni BG multiple che trascendono la realtà e le ragazze senza origine */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Se sei preoccupato di utilizzare JS per fornire compatibilità con le versioni precedenti, puoi semplicemente dichiarare background due volte, sebbene ciò abbia anche i suoi svantaggi sotto forma di possibile doppio caricamento delle risorse (dipende dall'implementazione dell'elaborazione CSS in un particolare browser):

/* più bg fallback */ background: #000 url(...) ...; /* Fantastiche dichiarazioni BG multiple che trascendono la realtà e le ragazze senza risorse */ background url(...), url(...), url(...), #000 url(...);

Se hai già iniziato a pensare a Windows 8, tieni presente che puoi utilizzare più sfondi quando sviluppi applicazioni in stile metro, poiché utilizza lo stesso motore di IE10.

P.s. In tema: non posso fare a meno di ricordare il fenomenale articolo su .

Nei CSS 2 è impossibile aggiungere due sfondi a un elemento contemporaneamente, quindi devi annidare un elemento all'interno dell'altro e dare a ciascuno la propria immagine di sfondo. Per layout complessi, tali allegati a volte possono essere contati circa una dozzina. È chiaro che un simile accumulo non porta a nulla di buono, ma cosa fare? Si scopre che c'è qualcosa! In CSS 3, puoi aggiungere più immagini di sfondo a qualsiasi elemento contemporaneamente. Quindi prendiamo il disegno a blocchi (Fig. 1), lo tagliamo a pezzi e iniziamo a testarlo nei browser.

Riso. 1. Blocca per il sito

Per semplicità, prenderò la larghezza del blocco come dimensione fissa e l'altezza varierà a seconda del contenuto. Le parti superiore e inferiore sono chiaramente visibili nel disegno; le ho ritagliate nell'editor e le ho piegate a strati in un file separato. La parte centrale deve essere scelta in modo che si ripeta verticalmente senza cuciture. Il disegno ha uno schema ripetitivo ben definito, quindi non dovrebbero esserci difficoltà nell'evidenziarlo. Copio e incollo nei frammenti precedenti. Il risultato sarà un'immagine come questa (Fig. 2).

Riso. 2. Immagini preparate

In linea di principio, puoi salvare ogni frammento come file separato, ma gli sprite CSS (la cosiddetta tecnologia per incollare più immagini in una) presentano numerosi vantaggi. In primo luogo, grazie alla riduzione del numero di file, si riduce il numero di richieste al server e, in secondo luogo, le immagini vengono caricate e visualizzate complessivamente più velocemente.

Lo sfondo stesso viene visualizzato dalla proprietà background, che specifica anche le coordinate del frammento desiderato. I parametri di ogni sfondo sono elencati separati da virgole e in questo caso è importante il loro ordine. Voglio che la parte superiore e inferiore del blocco non si sovrappongano, quindi le metto per prime (esempio 1).

Esempio 1. Diverse immagini di sfondo

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Il primo sfondo mostra il bordo superiore del blocco, il secondo sfondo quello inferiore e il terzo i bordi verticali.

Controlliamo i browser. Internet Explorer 8 non visualizzava alcuna immagine, altri browser (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) visualizzavano correttamente la cornice (Fig. 3).

Riso. 3. Visualizzazione frame nel browser Safari

L'utilizzo di più sfondi rende la situazione molto più semplice per gli sviluppatori, soprattutto quando si dispongono i blocchi. Rimane solo una piccola cosa. È necessario che il browser IE 6–8 cessi di esistere.

Oggi, quasi ogni design di sito web contiene una bellissima immagine di sfondo.

Ogni progettista di layout sa che il modo più semplice per creare un progetto è il migliore possibile. Una delle tecniche semplici e convenienti è utilizzare poche righe di codice CSS.

Sembrerebbe una cosa da poco, eppure a volte è necessario creare qualcosa di complesso in modo semplice. Ad esempio, implementa diversi sfondi con parametri individuali, senza utilizzare blocchi div ausiliari. Cioè, risparmiare.

In questo articolo esamineremo la sintassi del codice che supporta più sfondi in un singolo elemento. Ecco come appare nella vita reale:

Codice CSS per sfondi multipli

Più immagini di sfondo vengono implementate utilizzando più valori dei parametri di sfondo CSS, separati da una virgola:

#multipleBGs ( background: url(photo1.png), url(photo2.png), url(photo3.png) ; ripetizione dello sfondo: nessuna ripetizione, nessuna ripetizione, ripetizione-y; posizione dello sfondo: 0 0, 30px 70px, in alto a destra; larghezza: 400px; bordo: 1px solido #ccc;

Ho provato a fare lo stesso con un codice breve. Sfortunatamente, non funziona.

Inoltre, puoi utilizzare altre proprietà dello sfondo ( background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size). Lo stesso che con i gradienti CSS.

È tutto! Spero che ti sia piaciuta questa tecnica di creazione di più sfondi, senza utilizzare elementi ausiliari. Codice semantico puro.

Se hai domande, commenti o suggerimenti su questa tecnica per creare sfondi multipli, scrivi nei commenti. Inoltre, vorrei fare un test