Come aggiungere divertenti sfondi CSS ai tuoi siti

Sep 12, 2025

Come si fa

Il tempo era uno sfondo della pagina web era una minuscola immagine di piastrelle - e spesso orribile, aggressivamente ad assaltare i bulbi oculari di ogni visitatore. Oggi, gli sfondi formano la fondazione del design grafico molto online.

Questa rivoluzione negli sfondi sul web è stata guidata dai progressi in CSS. Gli standard Web ora offrono molto più controllo, quindi puoi definire attentamente la posizione di uno sfondo, lavorare con gradienti e aggiungere più sfondi a un singolo elemento.

Coprendo tutto in questo settore richiederebbe un libro, e quindi abbiamo scelto alcuni importanti punti di partenza per farti andare avanti, e il link della scelta dispari per te da esplorare ulteriormente. Godere!

Aggiungi sfondi CSS agli elementi della pagina Web

Gli sfondi CSS richiedono il sfondo proprietà della stenografia o l'uso di proprietà più specifiche, come (ma non limitato a): colore di sfondo ; immagine di sfondo ; Posizioni di sfondo ; Dimensioni di sfondo ; sfondo-ripetizione. ; e attacco di sfondo. . Questi possono essere definiti per lo sfondo della pagina web (attraverso il corpo selettore) o elementi di pagina come intestazioni, div, e così via.

A livello più elementare, potresti usare sfondo Per trasformare una pagina rossa:

 corpo {
 Sfondo: rosso;
 }

Andando un po 'più avanzato, è possibile aggiungere un'immagine che è centrata orizzontalmente, 20px dalla parte superiore del suo contenitore, non ripetuta e fissata in posizione mentre la pagina Web scorre:

 corpo {
 Sfondo: URL (immagine.png) Centro 20px No-ripetizione fisso;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Un'immagine come sfondo (nota: evitare questo basso livello di contrasto nei propri disegni)

Se volessi scriverlo senza usare sfondo Shorthand, sembrerebbe questo:

 corpo {
 Immagine di sfondo: URL (immagine.png);
 Sfondo-Posizione: Center 20px;
 sfondo-ripetizione: no-ripetizione;
 Attacco di sfondo: fisso;
 }

Se si desidera aggiungere più sfondi a un elemento, è possibile selezionare i set di valore separati nella dichiarazione CSS. Si noti che a quale articolo è specificato prima è nella parte superiore dello stack, il che significa che verrà visualizzato 'sopra' altri sfondi.

 corpo {
 Sfondo: URL (image.png) Centro 20px No-ripetizione fissa, URL (immagine-2.png) Centro Centro Centro No-ripetizione fisso;
 }

In questo caso, un'immagine appare come da nell'esempio precedente e il "sotto" direttamente nel centro dell'area del contenuto.

Ridimensiona le immagini di sfondo.

Finora, abbiamo evitato Dimensioni di sfondo . Ma quello è piuttosto importante, perché ti consente di controllare le dimensioni di un'immagine di sfondo. Nello specifico, è possibile definire le dimensioni orizzontali e verticali di un'immagine in pixel o termini percentuali, come ad esempio:

 Dimensioni dello sfondo: 200px 50px;

Ci sono anche due valori di parole chiave, che possono essere utilizzati invece: contenere e copertina . Questi sono ampiamente simili, nel fornire un modo per ridimensionare un'immagine all'interno dell'area di contenuto di un elemento. La differenza è quella contenere è progettato per creare un'immagine il più grande possibile, pur mostrando tutto all'interno dell'area del contenuto (il che significa che di solito ottieni lacune intorno), mentre copertina copre completamente l'area del contenuto, ma può provocare parte ad alcune immagini non visibili. Quest'ultimo è comunemente usato sui siti che utilizzano fotografie come sfondi.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — Css 'contengono valore (in alto) contro' copertina '(in basso) valori

Si noti che puoi aggiungere Dimensioni di sfondo a A. sfondo SHORTHAND Definizione - Mettilo dopo il Posizioni di sfondo Valori, con una barra in avanti che separa i due:

 Sfondo: URL (image.png) Centro 20px / contenere alcuna ripetizione fissa

Utilizzare immagini di sfondo Retina ad alta risoluzione

Quando si aggiunge sfondi Retina ad alta risoluzione, Dimensioni di sfondo è anche utile per forzare tali immagini a comparire le dimensioni corrette.

Per un esempio, immagina a div. con un id. di logo . Questo, opportunamente, ha un logo applicato come sfondo in CSS. È un quadrato di 150 pixel, e quindi il CSS di base che dovresti usare è:

 #logo {
 Larghezza: 150 px;
 Altezza: 150 px;
 Sfondo: URL (logo.png) No-ripetere;
 }

High-res complica le cose. Non vogliamo forzare l'hardware più anziano per caricare immagini più grandi e quindi una query del supporto deve essere utilizzata per caricare il logo a risoluzione superiore solo sull'hardware supportato.

 @Media (-Webkit-Min-Device-Pixel-Ratio: 2),
 (Min-Risoluzione: 192DPI) {
  #logo {
   sfondo - Immagine: URL ([email protected]);
  }
 }

Il problema ora è l'immagine @ 2x high-res è di 300 pixel quadrati (poiché ha il doppio della risoluzione dell'originale), ma usato come sfondo per un contenitore quadrato a 150 pixel. Quindi a questo punto, vedi solo un quarto di esso.

A high-res image before a resize fix — Un'immagine ad alta risoluzione prima di una correzione di ridimensionamento

Questo è fissato assegnando uno specifico Dimensioni di sfondo Valore per #logo :

 #logo {
 Larghezza: 150 px;
 Altezza: 150 px;
 Sfondo: URL (logo.png) No-ripetere;
 Dimensioni di sfondo: 150 px 150px;
 }

Il logo ad alto res, ora comodamente nel suo contenitore

Un metodo più moderno di lavorare con più risoluzioni di sfondo e il raggiungimento dello stesso risultato è CSS4 Image-Set. :

 #logo {
 Immagine di sfondo: set di immagini (
  URL (logo.png) 1x,
  url ([email protected]) 2x
  );
 }

I benefici di Image-Set. sono semplici CSS e l'agente utente che determina l'immagine che dovrebbe essere utilizzata. Il ribasso è il supporto del browser - al momento della scrittura - rimane incompleto. Visita questa pagina di prova Per un mezzo rapido per controllare come i browser supporti la tariffa. (Questo è forse perché molti designer Utilizzare gli script per automatizzare il servizio di immagini ad alto res .

Lavora con canali e gradienti alfa

La nostra punta finale in questo Blowing Fast (in termini di tutorial del sito Web) Articolo riguarda canali e gradienti alfa. Quando Internet è stato alimentato a vapore, hai spesso avuto i progettisti usano i gif di "scacchiera" per simulare i canali alfa (ogni altro pixel è stato trasparente). Ora, assegni solo i colori in RGBA:

 Main {
 Sfondo: RGBA (255.255.255,0,7);
 }

Nell'esempio sopra, lo sfondo sarebbe il 70 per cento bianco, permettendo a tutto ciò che è sotto di esso da mostrare. Devi stare attento a mantenere la chiarezza quando si utilizza sfondi semitrasparenti che sono sopra le immagini complesse, ma possono essere ottimi per aggiungere interessi visivi alle pagine web.

Alpha channels, gradients, and some questionable colour choices — Canali alfa, gradienti e alcune scelte di colore discutibili

Allo stesso modo, i web designer utilizzati per produrre e piastrelle gif se volevano un gradiente come uno sfondo, ma non è più necessario neanche, a meno che tu non voglia festeggiare come se fosse il 1999. In questi giorni, vorrà il CSS3 Gradiente lineare e gradiente radiale Proprietà, per le quali definisci indicazioni e interruzioni di colore.

Ecco una regola CSS con un gradiente di base:

 H1 {
 Sfondo: gradiente lineare (a destra, RGBA (255.255.255,1), RGBA (255.255.255,0));
}

Ciò sarebbe applicato ai titoli di livello-one, dando loro un gradiente lineare che va da sinistra a destra, a partire da un bianco solido e dalla fine in bianco trasparente.

Usando angoli e interruzioni di colori multipli, puoi andare molto, molto oltre con gradienti. Per sperimentare, prova a usare un fotoshop-like Generatore di gradiente CSS. ed esaminando l'output del codice (essendo consapevole l'esempio collegato aggiunge la sintassi per i browser più vecchi - basta afferrare il Gradiente lineare linea per il tuo uso).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Poiché la Galleria dei modelli CSS mostra, puoi fare cose davvero fantasiose con i gradienti CSS

Se hai voglia di verificare cosa possono fare i professionisti del web condito con i gradienti e Dimensioni di sfondo , dai un'occhiata a Lea Verou's Galleria dei modelli CSS3. . Lì troverai un sacco di esempi dal vivo che utilizzano gradienti CSS per creare tutti i tipi di modelli di sfondo gravemente impressionanti.

E, sì, c'è un pizzico dove siamo arrivati in merito agli assalti degli occhi in alcuni di loro.Ma come con tutto, quando si tratta di sfondi Web, la chiave è garantire ciò che si aggiunge è rilevante nel contesto del tuo design e, soprattutto, che gli sfondi non distraggono il contenuto, o rendono illeggibile.

Link correlati:

Una guida per scrivere migliori CSS
Crea un layout rispondente con la griglia CSS
Trucchi CSS per rivoluzionare i tuoi layout

Come aggiungere divertenti sfondi CSS ai tuoi siti

Aggiungi sfondi CSS agli elementi della pagina Web

Ridimensiona le immagini di sfondo.

Utilizzare immagini di sfondo Retina ad alta risoluzione

Lavora con canali e gradienti alfa

Come si fa - Articoli più popolari

Come disegnare animali: 15 migliori consigli

3 tecniche di retop in zbrush essenziali

condurre test utente gratuiti e veloci con UserLook

Come scolpire un naso umano in Zbrush: 4 semplici passaggi

Inizia con la piattaforma di animazione Greensock

Costruisci app mobili multipiattaforma con il flutter di Google

Cos'è una linea di terminator?

Come dipingere riflessioni convincenti

Categorie