Come allineare un'immagine di sfondo a destra. Che succede con la compatibilità?

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 i layout complessi, tali allegati a volte possono essere contati fino a 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 aggiungerne multipli immagini di sfondo per qualsiasi elemento. 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 taglia unica e l'altezza si allungherà 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 fascicolo 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 ciascuno sfondo sono elencati separati da virgole e in in questo caso il loro ordine è importante. Ho bisogno della parte superiore e Parte inferiore i blocchi non si sovrapponevano, quindi li ho messi per primi (esempio 1).

Esempio 1. Diversi 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.

• Esercitazione

Abbiamo già accennato alle funzionalità del modulo Sfondi e bordi CSS3, esaminando il lavoro con le ombre (). Oggi parleremo un po' di un altro interessante opportunità- utilizzando 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:

• risparmio di traffico sulla dimensione dell'immagine se le singole immagini pesano complessivamente meno 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 ciascuno immagine di sfondo viene creato un blocco e gli viene assegnata un'immagine di sfondo corrispondente. 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 a sinistra in alto; ) .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 10px; )

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, con 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

Viene in soccorso nuova opzione, aggiunto ai CSS3, è 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 sotto forma di elenco, è possibile 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, è possibile riscrivere l'intera immagine con uno solo regola semplice:

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 in background": secondo le specifiche, se manca parte dell'elenco alla fine, il browser dovrebbe ripetere elenco specificato il numero di volte richiesto per far corrispondere il numero di immagini nell'elenco.

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 rivolgermi a lui singoli elementi composizioni per nome, id, classe o qualche 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 questa cosa possa essere risolta codice conveniente in javascript, che si occuperà della virtualizzazione delle relazioni con i singoli layer, lasciando il più pulito possibile il codice html della pagina.

E la compatibilità?

Tutto versioni moderne 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 soluzioni alternative. 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 confuso sull'utilizzo di JS per fornire retrocompatibilità, puoi semplicemente dichiarare lo sfondo due volte, tuttavia, questo ha anche i suoi svantaggi sotto forma di possibilità doppio avvio 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 .

Tag:

• css3
• sfondi multipli
• bordi e sfondi

Aggiungere etichette

Puoi aggiungere più immagini di sfondo a un elemento contemporaneamente tramite un'unica proprietà di sfondo. Ciò ti consente di cavartela con un elemento da creare sfondo complesso o un'immagine, visualizzandola più volte con varie impostazioni. Tutte le immagini con i relativi parametri sono elencate separate da virgole, con l'immagine visualizzata sopra le altre immagini indicata per prima 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 è necessario impostare separatamente alcune proprietà di stile per lo sfondo, come la dimensione dello sfondo come nell'esempio sopra, i parametri per ciascuno sfondo vengono elencati separati da virgole. Risultato questo esempio mostrato in Fig. 1.

Riso. 1. Sfondo con tre immagini

Le singole immagini di sfondo ti consentono di modificarne la posizione e anche di animarle, 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 varia a seconda del volume dei contenuti del blocco.

Riso. 2. Cornice disegnata a mano

La figura mostra chiaramente le parti superiore e inferiore che devono essere ritagliate redattore grafico e posizionarlo orizzontalmente. La parte centrale è selezionata in modo tale da ripetersi verticalmente senza cuciture. L'immagine ha uno schema ripetuto pronunciato, quindi non dovrebbero esserci difficoltà nell'evidenziarla. Il risultato sarà un'immagine preparata (Fig. 3). Il campo a scacchi indica la trasparenza; permette di impostare uno sfondo colorato insieme alle immagini e modificarlo facilmente attraverso gli stili.

Riso. 3. Immagine preparata per lo sfondo

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. Vogliamo che la parte superiore e quella inferiore del blocco non si sovrappongano, quindi le mettiamo per prime (esempio 3). Il colore dello sfondo viene specificato per ultimo.

Esempio 3. Diverse immagini di sfondo

Il primo sfondo mostra il bordo superiore del blocco, il secondo sfondo quello inferiore e il terzo i bordi verticali. Quest'ultimo è il colore visibile nella parte centrale trasparente del blocco (Fig. 4).

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

Sebbene siano relativamente facili da capire, i background CSS possono tuttavia causare confusione e sollevare una serie di domande quando si lavora su compiti specifici. Cercheremo di chiarire questo malinteso e di rispondere alle domande che sorgono durante la risoluzione di problemi specifici.

Cosa sono gli sfondi CSS?

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

Lo sfondo dell'elemento è descritto secondo modello a blocchi CSS. I margini non fanno parte dello sfondo, ma i bordi, la spaziatura interna e la larghezza del contenuto fanno parte dello sfondo.

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

Background-color - – imposta il colore di sfondo dell'elemento. Il colore può essere impostato su esadecimale, rgb o su uno dei nomi di colore limitati. Inoltre, il colore di sfondo può essere impostato su trasparente o ereditare un valore elemento genitore. Per maggiori dettagli, vedere l'articolo Immagine di sfondo: imposta l'immagine come sfondo per l'elemento e il suo valore assomiglia a url ("percorso dell'immagine"). La proprietà background-image può anche avere i valori none ed ereditare . Ripetizione dello sfondo (ripetizione dello sfondo): imposta una ripetizione dell'immagine di sfondo. Valori: ripeti , no-repeat , ripeti-x , ripeti-y e inherit . Background-attachment – ​​imposta come applicazione in background si sposterà con la pagina. Può scorrere (scroll, quando si scorre la pagina, si sposta con l'elemento, valore predefinito), rimane fisso (fixed, rimane fisso quando si scorre la pagina) o eredita il valore dell'elemento genitore. Posizione dello sfondo: imposta la posizione iniziale dell'immagine di sfondo nell'elemento. La proprietà background-position ha due valori, posizione orizzontale (può essere sinistra, centro, destra) e posizione verticale (può essere alto, centro, basso). La posizione dello sfondo può anche essere impostata su una percentuale dell'angolo superiore sinistro dell'elemento.

Ridurre le regole di background CSS

È possibile impostare individualmente ciascuna proprietà dello sfondo, ma in pratica è meglio semplificarlo. 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"), ripeti-x, scorrimento, in alto a sinistra)

Con questa semplificazione non è necessario impostare tutte le proprietà, ma è necessario utilizzare l'ordine corretto. Le proprietà non specificate avranno i seguenti valori predefiniti:

• colore di sfondo: trasparente
• immagine di sfondo: nessuna
• ripetizione in background: ripetizione
• allegato di sfondo: scroll
• posizione dello sfondo: 0% 0%

Di seguito è mostrato un esempio di notazione abbreviata:

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

In ciascuna delle righe di codice sopra riportate, verranno utilizzati valori predefiniti per le proprietà che non sono specificatamente impostate.

Le immagini di sfondo CSS non sono immagini HTML

È importante capire che le immagini specificate con utilizzando i CSS gli sfondi si comportano diversamente rispetto alle immagini specificate utilizzando il tag .

Il tag img crea nuovo blocco. L'immagine di sfondo CSS viene posizionata all'interno del blocco esistente. Non è possibile aggiungere margini, un bordo o uno sfondo a un'immagine di sfondo CSS. Inoltre, a un'immagine di sfondo CSS non è possibile assegnare larghezza e altezza.

Poiché un'immagine in HTML è un nuovo blocco (un blocco in linea, ovvero è avvolto attorno ad altri elementi), ha una larghezza e un'altezza, un riempimento e dei margini, nonché un bordo. Inoltre, a tag img puoi applicare lo sfondo Immagine CSS. Non so quanto spesso venga utilizzato nella pratica, ma se lo desideri, puoi aggiungere un'immagine di sfondo dietro l'immagine.

Risposte a domande comuni

Sebbene la proprietà background sia relativamente facile da usare e da comprendere, il suo utilizzo può comunque sollevare una serie di domande.

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

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

In alcuni casi, un elemento può contenere contenuto a cui è stato applicato proprietà float, che rimuove il contenuto dal flusso principale del documento. In questo caso l'elemento contenente il contenuto (dove si vuole aggiungere uno sfondo) formalmente non ha dimensioni. Affinché un elemento abbia dimensioni (in modo che il contenuto a cui è applicata la proprietà float non sembri uscire dal flusso principale del documento), è necessario applicare proprietà di trabocco.

2. Posso utilizzare più immagini di sfondo?

Sì e no. La specifica CSS3 ti consente di utilizzare più immagini di sfondo, tuttavia, poiché non tutti i browser sono completamente guidati da questa specifica, è meglio evitare di utilizzare più immagini.

Dovresti anche ricordare che puoi applicare uno sfondo a tutti gli elementi HTML. Diciamo che hai un div contenente un h2 e un paragrafo. Puoi applicare immagini di sfondo a ciascuno di essi 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, creando così più elementi a cui puoi aggiungere uno sfondo. Questo approccio è piuttosto complicato, ma funziona.

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

Ci sono due modi. Devi aggiungere una nuova regola all'elemento con la pseudo-class:hover in modo che punti (immagine di sfondo) a una nuova immagine o che l'immagine assomigli Sprite CSS e cambia la sua posizione sullo sfondo per mostrare una parte diversa dello sprite.

È importante notare che le versioni precedenti di IE non supportano la pseudo-classe:hover naturalmente, quindi affinché questi metodi funzionino in IE avrai bisogno di un po' di Javascript. Preferisco usare la soluzione Suckerfish, la stessa soluzione che utilizzo per i menu a discesa.

4. Come rendere trasparenti le immagini di sfondo?

Puoi aggiungere trasparenza a un'immagine durante la creazione in Photoshop. In questo caso, il tipo di immagine può essere modificato, ma non sarai comunque in grado di vederla.

5. Posso inserire un'immagine di sfondo in una tabella, riga di tabella o cella di tabella?

SÌ. Questi sono tutti elementi html, quindi possono assumere proprietà di sfondo. Tuttavia, gli sfondi delle tabelle hanno nel modo più duro 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 piuttosto confuso, motivo per cui molte persone preferiscono utilizzare gli attributi html quando creano sfondi per le tabelle.

Fortunatamente, il valore di trasparenza è impostato su predefinito, quindi i livelli sopra dovrebbero già essere trasparenti. Tuttavia, una volta che inizi ad aggiungere sfondi a una parte del tavolo, ottieni operazione appropriata può essere piuttosto difficile

.

6. È possibile aggiungere un'immagine di sfondo ai bordi?

Non ancora. Si promette che questa proprietà sarà implementata nei CSS3. Se non ti dispiace che non funzioni con 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. Un'immagine di sfondo può essere facilmente utilizzata come punto elenco per un elenco. Penso che non ci saranno difficoltà con questo.

8. Come aggiungere il riempimento a un'immagine di sfondo?

Come accennato in precedenza, un'immagine di sfondo non crea un nuovo blocco CSS, quindi non è possibile aggiungervi uno sfondo. È invece necessario utilizzare la proprietà background-position per compensare l'immagine di sfondo risultante. Esistono anche altri metodi.

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

Similmente alle domande precedenti, la risposta è legata alla posizione dello sfondo. Utilizza il valore corretto per la proprietà background-position ( background-position:right;) e l'immagine verrà allineata al bordo destro dell'elemento.

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

Non esiste alcun controllo su questa proprietà per una buona ragione. Ci vuole molto inchiostro per stampare un'immagine, quindi molte persone scelgono di non stamparla. Se stampare o meno un'immagine viene impostato individualmente nel browser. Ti consiglio di lasciare tutto così com'è, ma se decidi di stampare, ecco un modo per aggirare il divieto di stampare immagini di sfondo justaddwater.dk/2009/09/29/print-css- background-logo-hack/ .

11. Come posso allungare un'immagine di sfondo per adattarla a un elemento?

Per gli altri possibile soluzione serve a creare un'immagine molto più grande del necessario e la posizione dello sfondo è impostata al 50% 50%. In questo modo l'immagine di sfondo sarà centrata all'interno dell'elemento e, man mano che la larghezza dell'elemento aumenta, più foto diventa visibile. L'immagine rimarrà centrata.

Non è esattamente un allungamento, ma assicura che l'immagine riempia lo spazio man mano che lo spazio diventa più grande.

12. È possibile racchiudere 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 a tutto il contenuto 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 questo elemento.

Conclusione

Spero che questo articolo ti aiuti a risolvere i problemi che potrebbero sorgere quando lavori proprietà CSS di sfondo o risolvere il tuo problema. Importante da ricordare, Sfondi CSS non creare nuovi blocchi. Riempiono solo i blocchi HTML esistenti. Capire questo ti aiuterà a determinare cosa puoi e cosa non puoi fare con le immagini di sfondo.

Gli sfondi CSS svolgono un ruolo chiave nell'impatto che il tuo design ha sull'utente. La maggior parte delle immagini che crei per il tuo sito verranno impostate utilizzando la proprietà background, quindi questa è la prima cosa che dovresti padroneggiare.