Come implementare l'immagine di sfondo in CSS?

Questo articolo ti fornirà una conoscenza dettagliata e completa delle immagini di sfondo in CSS. Dove usarlo e implementare lo stesso.

CSS è l'acronimo di Cascading Style Sheets. È un linguaggio di progettazione semplice ma potente che ha la capacità di trasformare le pagine web. In termini semplici, semplifica il processo di creazione di pagine web presentabili e attraenti per gli utenti con l'aiuto di . In questo articolo, capiremo come implementare varie immagini di sfondo in CSS nel seguente ordine:



Immagine di sfondo nelle proprietà CSS

Ci sono molte proprietà che vengono utilizzate per controllare i comportamenti e il posizionamento dell'immagine. Queste proprietà sono:



  • immagine di sfondo
  • ripetizione in background
  • sfondo-allegato
  • background-position
  • dimensione dello sfondo
  • colore di sfondo

Acquisiremo familiarità con ciascuna di queste proprietà e vedremo quando e come usarle con alcune interessanti dimostrazioni.

Immagine di sfondo in CSS



Il immagine di sfondo la proprietà come suggerisce il nome è semplicemente usata per indicare e impostare l'immagine di sfondo attraverso un elemento in una pagina web. Un'immagine di sfondo per impostazione predefinita viene posizionata nell'angolo superiore sinistro di un elemento.

sintassi: immagine di sfondo: url | nessuno | gradiente lineare | gradiente radiale

body {background-image: url ('apple.jpg')}

sfondo utilizzando l'URL

Comprendiamo i parametri:



  • url: L'input di questo parametro ci consente di specificare un percorso di file per qualsiasi immagine o l'URL dell'immagine che deve essere impostata come sfondo. Per dichiarare più di un'immagine, gli URL sono separati da una virgola.
body {background-image: url ('apple.jpg')}

Background-url

  • nessuna: Questo è il valore predefinito della proprietà e nessuna immagine di sfondo viene renderizzata se il suo valore è specificato.
body {background: none}
  • gradiente lineare (): L'immagine di sfondo è impostata su un gradiente lineare. È necessario specificare un minimo di almeno due colori per questa proprietà, ovvero dall'alto verso il basso.
body {background-color: # 001 background-image: linear-gradient (white 15%, transparent 16%), linear-gradient (bianco 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}

  • gradiente radiale (): L'immagine di sfondo è impostata su un gradiente radiale. È necessario specificare un minimo di almeno due colori per questa proprietà, ovvero dal centro ai bordi.
body {background-color: # 001 background-image: radial-gradient (bianco 15%, transparent 16%), radial-gradient (bianco 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}

  • ripetizione-lineare-gradiente (): Ripete un gradiente lineare. Usiamo lo stesso esempio che abbiamo visto sopra nel gradiente lineare per il gradiente lineare ripetuto e vediamo la differenza.
body {background-color: # 001 background-image: repeating-linear-gradient (white 15%, transparent 16%), repeating-linear-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}

  • ripetizione-radiale-gradiente (): Ripete un gradiente radiale. Esploriamo lo stesso esempio che abbiamo usato sopra in un gradiente radiale.
body {background-color: # 001 background-image: repeating-radial-gradient (white 15%, transparent 16%), repeating-radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}

Sfondo di fallback

È sempre consigliabile, come suggerimento professionale, aggiungere un colore di sfondo come opzione di riserva. Viene in soccorso soprattutto quando le immagini di sfondo non vengono caricate o il gradiente di sfondo che abbiamo impostato durante lo sviluppo non è supportato da alcuni dei vecchi browser su cui viene visualizzato.

Questo non rovina l'esperienza dell'utente e può essere dichiarato in questo modo:

body {background: url (apple_lost.jpg) pink}

Sfondo multiplo

Abbiamo anche un'opzione per impostare più immagini di sfondo ed è richiesta nella maggior parte dei casi come un'immagine in primo piano e di sfondo. L'ordine dell'immagine è importante qui, l'immagine che dovrebbe essere davanti viene dichiarata per prima e l'immagine che dovrebbe essere dietro per ultima viene dichiarata dopo.

Di seguito è riportato l'esempio per più immagini di sfondo:

body {background-image: url ('small-heart.jpg'), url ('background.jpg')}

Ripetizione in background

La proprietà background-repeat viene utilizzata insieme all'immagine di sfondo per definire il comportamento di ripetizione di un'immagine. Specifica se e come verrà ripetuta un'immagine di sfondo. L'immagine di sfondo per impostazione predefinita viene ripetuta sia verticalmente che orizzontalmente.

algoritmi di apprendimento automatico in r

I valori possibili sono:

  • repeat- L'immagine si ripete sia orizzontalmente che verticalmente
  • no-repeat - L'immagine non si ripete
  • repeat-x - L'immagine viene ripetuta orizzontalmente
  • repeat-y - L'immagine viene ripetuta verticalmente
  • spazio: l'immagine viene ripetuta con spazi o spazi vuoti.
  • round - L'immagine viene ripetuta per riempire l'area senza spazi tra di loro.

La sintassi CSS per la proprietà di ripetizione dello sfondo è:

ripetizione in background: ripeti | ripeti-x | ripeti-y | no-ripeti | spazio | giro

body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}

Allegato in background

Il sfondo-allegato viene utilizzata insieme all'immagine di sfondo per indicare se l'immagine deve scorrere o meno durante lo scorrimento del contenuto. Significa che l'immagine di sfondo deve essere corretta o deve scorrere insieme al documento rispetto alla visualizzazione della finestra del browser. Il valore predefinito è lo scorrimento.

I valori possibili sono:

  • scroll - L'immagine scorre insieme alla pagina.
  • risolto - L'immagine non scorrerà insieme alla pagina

La sintassi CSS per l'allegato in background è:

sfondo-allegato: scroll | fisso

body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}

Posizione sfondo

Il background-position viene utilizzata per indicare la posizione o il posizionamento di un'immagine di sfondo. I valori possibili sono:

  • superiore
  • destra
  • parte inferiore
  • sinistra
  • centro
  • combinazione di questi valori (ad esempio, in alto a sinistra)

La sintassi CSS per la posizione dello sfondo è:

background-position: in alto | a destra | a sinistra | in basso | al centro

body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}

Immagine di sfondo in dimensioni CSS

Questa proprietà è una delle più utili in quanto ci consente di controllare la dimensione dell'immagine di sfondo. Esistono diverse combinazioni che possiamo utilizzare con questa proprietà e ottenere risultati di conseguenza. Il valore predefinito è auto.

I seguenti valori possono essere utilizzati con background-size:

  • auto
  • una lunghezza-altezza e larghezza dell'immagine, ad es. 20px 40px.
  • una percentuale-altezza e larghezza dell'immagine come percentuale rispetto all'elemento genitore, ad es. 50% 50%.
  • center- Allinea l'immagine al centro
  • copertina, ridimensionando l'immagine per coprire completamente l'area dello sfondo.
  • contenere, ridimensionando l'immagine per adattarla fino alla sua altezza e larghezza effettive.

La sintassi CSS per la posizione dello sfondo è:

dimensione dello sfondo: valore

body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}

body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contiene, 400px 150px}

Colore di sfondo

Questa è la più semplice di tutte le proprietà in CSS. Applica i colori a tinta unita allo sfondo della pagina. Il valore di questa proprietà può essere specificato in colori (ad esempio rosso, blu, ecc.), Valore esadecimale e valore RGB.

La sintassi CSS per il colore di sfondo è:

colore di sfondo: valore

body {background-image: url (small-heart.jpg) background-color: # 22a8e3}

Questo conclude tutte le proprietà che possiamo usare con lo sfondo. Possiamo sempre provare diverse combinazioni delle proprietà come abbiamo visto nella nostra dimostrazione.

I CSS sono essenziali e devono acquisire competenze per ogni sviluppatore web front-end. Aiuta durante la progettazione e lo stile dello sfondo e per creare siti Web impressionanti e arricchire l'esperienza dell'utente. La cosa migliore è continuare a sperimentare e sfruttare appieno questa speciale tecnologia front-end in quanto può fare miracoli e trasformare dinamicamente la pagina.

Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con le tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.

Hai domande per noi? Per favore menzionalo nella sezione commenti del blog 'Immagine di sfondo in CSS' e ti risponderemo.