Posso usare più immagini di sfondo? Come allineare un'immagine di sfondo a destra.

Una parte importante del web design sono gli sfondi CSS. Le proprietà (ve) dello sfondo contengono i colori e le immagini che fungono da sfondo del contenuto e sono responsabili dell'estetica del sito. Eliminare sfondi CSS dal tuo sito e molto probabilmente apparirà come testo su uno sfondo bianco.

Essendo relativamente facile da capire, sfondi CSS, tuttavia, può causare confusione e sollevare una serie di domande quando si lavora su compiti specifici. Cercheremo di chiarire questo malinteso e rispondere alle domande che sorgono quando si risolvono problemi specifici.

Cosa sono gli sfondi CSS?

In sostanza, il nome degli sfondi CSS è la loro definizione. Questo è ciò che aggiungi allo sfondo dell'elemento. Più precisamente, sono un colore o un'immagine situata dietro il contenuto che è stato aggiunto all'interno dell'elemento. Quando si progetta un sito Web basato su CSS, questi colori e immagini sono solitamente responsabili della maggior parte del design nel modello.

Lo sfondo dell'elemento è descritto secondo modello a blocchi SS... I margini non fanno parte dello sfondo, ma il bordo, il riempimento e la larghezza del contenuto fanno parte dello sfondo.

Ci sono 5 proprietà di sfondo applicabili a Selettore CSS, 4 dei quali si applicano alle immagini di sfondo:

Colore di sfondo (colore di sfondo): imposta il colore di sfondo dell'elemento. Il colore può essere impostato su esadecimale, rgb o su uno dei nomi di colore limitati. Anche il colore di sfondo può essere impostato su trasparente o ereditato elemento genitore... Maggiori dettagli nell'articolo Background-image - - imposta l'immagine come sfondo per l'elemento e il suo valore è simile a url ("percorso-immagine"). La proprietà background-image può anche essere impostata su none ed ereditare. Ripetizione sfondo (ripetizione sfondo) - - imposta la ripetizione dell'immagine di sfondo. I valori sono repeat, no-repeat, repeat-x, repeat-y ed eredita. Collegamento in background (allegato in background) - - imposta come applicazione in background si sposterà con la pagina. Può scorrere (scorrere, quando si scorre la pagina, si sposta con l'elemento, l'impostazione predefinita), rimane fisso (fisso, rimane fisso quando si scorre la pagina) o ereditare (ereditare) il valore dell'elemento padre. Posizione sfondo (posizione-sfondo) - Imposta la posizione iniziale dell'immagine di sfondo nell'elemento. La proprietà background-position ha due valori, la posizione orizzontale (può essere a sinistra, al centro, a destra) e verticale (può essere in alto, al centro, in basso). La posizione dello sfondo può essere impostata anche come % dell'angolo superiore sinistro dell'elemento.

Abbreviazione per le regole CSS in background

È possibile impostare singolarmente ogni proprietà di sfondo, ma in pratica è meglio semplificarla. In questo caso, le proprietà devono essere impostate nel seguente ordine: colore, immagine, ripetizione, applicazione, posizione (colore, immagine, ripetizione, allegato, posizione).

Div (sfondo: # 0088ff, url ("percorso-di-un-immagine"), repeat-x, scroll, a sinistra in alto}

Con questa semplificazione, non è necessario impostare tutte le proprietà, ma è necessario utilizzare l'ordine corretto... Alle proprietà non specificate dall'utente verranno assegnati i seguenti valori predefiniti:

• colore di sfondo: trasparente
• immagine di sfondo: nessuna
• background-repeat: ripeti
• sfondo-allegato: scroll
• posizione di fondo: 0% 0%

Di seguito è riportato un esempio di notazione abbreviata:

Sfondo: # 0077ff sfondo: url ("percorso-immagine") sfondo senza ripetizione: url ("percorso-immagine") in alto a sinistra

Ciascuna delle righe di codice precedenti utilizzerà i valori predefiniti per le proprietà non specificate.

Le immagini di sfondo CSS non sono immagini HTML

È importante capire che le immagini impostate con usando i CSS lo sfondo si comporta in modo diverso rispetto alle immagini specificate utilizzando il .

Il tag img crea nuovo blocco... L'immagine di sfondo CSS viene inserita nel blocco esistente. Non è possibile aggiungere margini, bordi e sfondo a un'immagine di sfondo CSS. Inoltre, un'immagine di sfondo CSS non può essere impostata su larghezza e altezza.

Poiché un'immagine in html è un nuovo blocco (un blocco in linea, cioè è avvolto con altri elementi), ha una larghezza e un'altezza, un'imbottitura e margini e un bordo. Inoltre, a tag img può essere applicato immagine di sfondo CSS. Non so quanto spesso venga usato in pratica, ma se lo desideri, puoi aggiungere un'immagine di sfondo per l'immagine.

Risposte a domande comuni

Sebbene la proprietà background sia relativamente facile da usare e da capire, lavorare con essa può comunque sollevare una serie di domande.

1. Perché l'immagine di sfondo non viene visualizzata?

Questo di solito è dovuto al fatto che l'elemento non ha né larghezza né altezza. Ricorda che l'immagine di sfondo non crea un blocco, ma ne riempie uno esistente. Se questo blocco non ha né larghezza né altezza, non c'è semplicemente nulla da riempire. La soluzione è ridimensionare l'elemento. Puoi dare all'elemento (non all'immagine di sfondo) un'altezza e una larghezza, oppure puoi riempire l'elemento con il contenuto, dove la larghezza e l'altezza vengono create da te.

In alcuni casi, l'elemento può contenere contenuto che è stato applicato proprietà float che strappa il contenuto dal flusso principale del documento. In questo caso, l'elemento che contiene il contenuto (dove si vuole aggiungere uno sfondo) è formalmente adimensionale. Affinché l'elemento venga ridimensionato (in modo che il contenuto a cui viene applicata la proprietà float, indipendentemente da come esce dal flusso principale del documento), deve essere applicata la proprietà overflow.

2. Posso utilizzare più immagini di sfondo?

Sì e no. La specifica CSS3 consente di utilizzare più immagini di sfondo, tuttavia, poiché non tutti i browser seguono completamente questa specifica, è meglio rimandare l'utilizzo di più immagini.

Ricorda inoltre che puoi applicare uno sfondo a tutti gli elementi HTML. Supponiamo che tu abbia un div contenente un h2 e un paragrafo. Puoi applicare immagini di sfondo a ciascuna di esse e controllando altre proprietà CSS, puoi ottenere ciò che desideri !!! effetto. Puoi anche inserire div e span aggiuntivi all'interno e all'esterno dell'elemento, il che creerà più elementi a cui puoi aggiungere uno sfondo. Questo approccio è piuttosto complicato, ma funziona.

3. Come scambiare le immagini di sfondo quando passi il mouse su un elemento?

Ci sono due modi. È necessario aggiungere una nuova regola all'elemento con la pseudo-classe: hover in modo che punti (immagine di sfondo) alla nuova immagine, o rendere l'immagine come Sprite css e cambia la sua posizione di sfondo per mostrare un'altra parte dello sprite.

È importante notare che le versioni precedenti di IE non supportano la: pseudo-classe hover. naturalmente quindi è necessario un po' di javascript per far funzionare questi metodi in IE. Preferisco usare la soluzione suckerfish, la stessa soluzione che uso per i menu a tendina.

4. Come posso rendere trasparenti le immagini di sfondo?

Puoi aggiungere trasparenza all'immagine quando la crei in Photoshop. In questo caso, la visualizzazione dell'immagine può essere modificata, ma sarà comunque impossibile vederla attraverso.

5. L'immagine di sfondo può essere posizionata in una tabella, riga di tabella o cella di tabella?

Sì. Questi sono tutti elementi html, quindi possono accettare proprietà di sfondo. Tuttavia, gli sfondi delle tabelle hanno modo difficile definizione che utilizza livelli e trasparenza, come mostrato nell'immagine seguente:

Lo sfondo di un elemento su un livello è visibile solo se lo sfondo dei livelli sopra di esso è trasparente. Questo può sembrare fonte di confusione, quindi molte persone preferiscono utilizzare gli attributi html durante la creazione degli sfondi delle tabelle.

Fortunatamente, l'opacità predefinita è impostata, quindi i livelli sopra dovrebbero essere già trasparenti. Tuttavia, una volta che inizi ad aggiungere sfondi a una parte della tabella, raggiungi lavoro corretto può essere piuttosto difficile

.

6. Posso aggiungere un'immagine di sfondo ai bordi?

Non ancora. Promettono di implementare questa proprietà in СSS3. Se non sei imbarazzato dal fatto che non funzionerà in molti browser, puoi usarlo ora.

7. Posso aggiungere immagini di sfondo agli elenchi?

Sì. Gli elenchi sono gli stessi elementi html, quindi possono accettare immagini di sfondo. L'immagine di sfondo può essere facilmente utilizzata come punto elenco (proiettile) dell'elenco. Penso che non ci saranno difficoltà con questo.

8. Come faccio a far rientrare l'immagine di sfondo?

Come accennato in precedenza, l'immagine di sfondo non crea un nuovo blocco CSS, quindi non è possibile aggiungere filigrane. È invece necessario utilizzare la proprietà background-position per eseguire l'offset dell'immagine di sfondo risultante. Ci sono anche altri modi.

9. Come allineare a destra l'immagine di sfondo.

Analogamente alle domande precedenti, la risposta è correlata alla posizione di fondo. Usa il valore giusto per la proprietà background-position (background-position: right;) e l'immagine sarà allineata a destra dell'elemento.

10. Perché l'immagine di sfondo non viene visualizzata quando viene stampata?

Non c'è controllo su questa proprietà per una buona ragione. Ci vuole molto inchiostro per stampare un'immagine, quindi molte persone scelgono di non stamparla. Stampa o non stampa l'immagine viene impostata individualmente nel browser. Consiglio di lasciarlo così com'è, ma se si sceglie di stampare, ecco un modo per ignorare justaddwater.dk/2009/09/29/print-css-background-logo-hack/ non consentito di stampare.

11. Come posso allungare l'immagine di sfondo per adattarla all'elemento?

Altri possibile soluzione serve per creare un'immagine molto più grande del necessario e la posizione dello sfondo è impostata su 50% 50%. In questo modo l'immagine di sfondo sarà centrata all'interno dell'elemento e, man mano che la larghezza dell'elemento cresce, tutto più immagine diventa visibile. Ciò manterrà l'immagine centrata.

Non si allunga davvero, ma assicura che l'immagine riempia lo spazio quando lo spazio diventa più grande.

12. Puoi avvolgere un collegamento attorno a un'immagine di sfondo?

No. Ancora una volta, le immagini di sfondo non creano blocchi. La soluzione sarebbe aggiungere un collegamento attorno a tutto il contenuto all'interno dell'elemento html o avvolgere il collegamento attorno all'elemento stesso. La scelta dell'opzione dipende dall'elemento html e dal contenuto all'interno di quell'elemento.

Conclusione

Spero che questo articolo ti aiuti a risolvere le domande che potrebbero sorgere quando lavori con sfondo Proprietà CSS o risolvi il problema che stai riscontrando. Importante da ricordare, sfondi CSS non creare nuovi blocchi. Popolano solo i blocchi html esistenti. Comprendere questo punto ti aiuterà a determinare cosa puoi e cosa non puoi fare con le immagini di sfondo.

Gli sfondi CSS giocano un ruolo chiave nel modo in cui gli utenti si sentono riguardo al tuo design. La maggior parte delle immagini che crei per il tuo sito verrà impostata utilizzando una proprietà di sfondo, quindi questa è la prima cosa da tenere in considerazione.

Diverse immagini di sfondo possono essere aggiunte a un elemento contemporaneamente tramite la singola proprietà di sfondo. Ciò rende possibile utilizzare un elemento per creare sfondo complesso o un'immagine, visualizzandola più volte con diverse impostazioni... Tutte le immagini con i loro parametri sono elencate separate da virgole, allo stesso tempo l'immagine è 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 devi 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. uno.

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 la parte superiore e parte inferiore essere tagliato in editore grafico e posizionarlo 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, inoltre imposta le coordinate del frammento desiderato. I parametri di ogni sfondo sono elencati separati da virgole e in in questo caso il loro ordine conta. 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. Diversi immagini di sfondo

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).

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

Riso. 1. Blocca per il sito

Per semplicità, prenderò la larghezza del blocco taglia unica, e l'altezza si allungherà a seconda del contenuto. La figura mostra chiaramente le parti superiore e inferiore, l'ho ritagliata nell'editor e l'ho piegata 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 ripetuto ben definito, quindi non dovrebbero esserci difficoltà con la selezione. Copia e incolla negli snippet precedenti. Di conseguenza, otterrai una tale immagine (Fig. 2).

Riso. 2. Immagini preparate

Fondamentalmente, è possibile salvare ogni pezzo come un file separato, ma gli sprite CSS (questo è il nome della tecnologia per incollare più immagini in una sola) hanno una serie di vantaggi. In primo luogo, il numero di richieste al server è ridotto a causa della riduzione del numero di file e, in secondo luogo, le cifre in totale vengono caricate e visualizzate più velocemente.

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

Esempio 1. Più immagini di sfondo

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

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

Controllo nei browser. Internet Explorer 8 non visualizzava alcuna immagine, altri browser (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) visualizzavano correttamente il frame (Fig. 3).

Riso. 3. Vista della cornice nel browser Safari

L'utilizzo di più sfondi rende la situazione molto più semplice per gli sviluppatori, specialmente quando il layout si blocca. È rimasta solo una piccola cosa. Il browser IE 6-8 deve cessare di esistere.

• Tutorial

Abbiamo già accennato alle capacità del modulo CSS3 Backgrounds and Borders, considerando di lavorare con le ombre (). Oggi ne parleremo un po' in più interessante opportunità- utilizzando 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.

Potrebbero esserci altri motivi ragionevoli :)

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:

V questo esempio tre sfondi nidificati e un blocco con pesci, situato accanto ai blocchi "sfondo". In teoria, il pesce può essere spostato, ad esempio, con usando JavaScript o Transizioni / Animazioni CSS3.

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 in Firefox 10 e Chrome 16. Quindi gli utenti delle ultime due esplorazioni non potranno ancora catturare un pesce.

Sfondi multipli

Viene in soccorso nuova opzione aggiunta in CSS3 è la capacità di definire più immagini di sfondo per un singolo 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, è possibile impostare posizionamento, 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 uno semplice regola:

Stili:
.sample3 .sea (altezza: 300 px; larghezza: 480 px; 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 dovrebbe ripetere elenco specificato il numero di volte necessario 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 di simile al seguente:

...

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 diffonda 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 tuo blocco e non puoi 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); ) AnimationLoop (); ));
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 Transizioni / Animazioni, 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 devi pagare tutto: non riesco a contattare singoli elementi composizione per nome, id, classe o qualche 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 può essere avvolto in codice conveniente a 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à?

Qualunque cosa versioni moderne browser popolari incluso IE9 +, supporta più immagini (puoi verificare, ad esempio, con caniuse).

Puoi anche utilizzare Modernizr per fornire browser che non supportano più sfondi con soluzioni 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 imprigionano i pulcini * /) .no-multiplebgs body (/ * laaaaaame fallback * /)
Se sei confuso sull'utilizzo di JS per fornire retrocompatibilità, puoi semplicemente dichiarare lo sfondo due volte, tuttavia, anche questo ha i suoi svantaggi nella forma di un possibile doppio caricamento risorse (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 quando sviluppi applicazioni in stile metro, poiché lo stesso motore viene utilizzato internamente come in IE10.

p.s. Sul tema: non posso fare a meno di ricordare l'articolo fenomenale su.

tag:

• css3
• sfondi multipli
• bordi e sfondi

Aggiungi i tag