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
- Immagine di sfondo in CSS
- Ripetizione in background
- Allegato in background
- Posizione sfondo
- Immagine di sfondo in dimensioni CSS
- Colore di sfondo
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')} 
- 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.