Come cambiare il colore di sfondo con i CSS

Come cambiare il colore di sfondo con i CSS

Uno dei momenti più emozionanti nella carriera di qualsiasi sviluppatore front-end in erba è imparare a cambiare il colore di sfondo di una pagina web.





Lavorare con l'HTML è fantastico e tutto, ma con poche righe di CSS puoi dare vita alle tue pagine e al tuo viaggio di programmazione.



Questa guida tratterà tutto ciò che devi sapere su come cambiare il colore di sfondo con i CSS.





Preparati

Facciamo un piccolo lavoro preliminare.

perché il mio spazio su disco è a 100

Nota : consiglio di usare Codice di Visual Studio con il Estensione del server live per visualizzare le modifiche in tempo reale mentre aggiorni HTML e CSS.



  1. Crea una cartella per i file del tuo progetto.
  2. Creare un index.html file per ospitare il tuo HTML. Puoi usare il codice standard o semplicemente impostarne qualcuno , , e tag.
  3. Creare un stili.css file per il tuo CSS.
  4. Collega il tuo file CSS con l'HTML inserendo dentro il tag.

Ora sei pronto per iniziare a modificare il CSS.

Imparentato: Come creare un sito web di Boilerplate



Come cambiare il colore di sfondo con i CSS

Il modo più semplice per cambiare il colore di sfondo è prendere di mira il corpo etichetta. Quindi, modifica il colore di sfondo proprietà. Puoi trovare i codici colore cercando e utilizzando l'estensione del browser Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Questo codice cambia lo sfondo in un bel azzurro.



Il colore di sfondo la proprietà accetta i colori in sei diverse forme:

  • nome : azzurro cielo; (per un'approssimazione)
  • codice esadecimale : # bfd6ff;
  • RGB : rgb(191, 214, 255);
  • rgb : rgba (191, 214, 255, 1); dove a è alfa (opacità)
  • HSL : hsl(218°, 100%, 87%);
  • HSLA : hsla (218°, 100%, 87%, 1); dove a è alfa (opacità)

Usa la stenografia sfondo proprietà al posto di colore di sfondo per tagliare il codice extra. Puoi cambiare il colore di sfondo di qualsiasi elemento HTML usando questo metodo.

Creare un elemento e assegnagli una classe: in questo caso, la classe è pannello . Imposta la sua altezza e larghezza proprietà nei CSS. Seleziona l'elemento in CSS e colora.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Qui puoi vedere il corpo sfondo la proprietà ha uno stile indipendente da .pannello sfondo proprietà.

La proprietà background accetta anche i gradienti:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Come cambiare l'immagine di sfondo nei CSS

Cosa succede se vuoi che lo sfondo sia un'immagine piuttosto che un colore solido o una sfumatura? La stenografia sfondo la proprietà è un amico familiare.

Assicurati che l'immagine si trovi nella stessa cartella dei file HTML e CSS. Altrimenti dovrai usare il percorso del file all'interno delle parentesi anziché solo il nome:

body {
background: url(leaves-and-trees.jpg)
}

Whoah! Sembra che l'immagine sia troppo ingrandita. Puoi risolvere il problema con il dimensione dello sfondo proprietà.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Per usare la stenografia sfondo proprietà in combinazione con il dimensione dello sfondo proprietà coperchio , devi anche specificare posizione di sfondo proprietà e separare i valori con una barra rovesciata (anche se sono valori posizionali predefiniti come in alto a sinistra .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Ecco qua! Un'immagine di sfondo di dimensioni adeguate in una riga di CSS.

Per saperne di più: Come impostare un'immagine di sfondo nei CSS

Nota : fai attenzione a includere immagini di sfondo di grandi dimensioni che occupano molto spazio di archiviazione. Questi possono essere difficili da caricare sui dispositivi mobili, dove hai a disposizione due secondi per dare agli utenti un motivo per rimanere sulla pagina.

Migliora il tuo gioco CSS con CSS box-shadow

Per uno sviluppatore come te, le proprietà background-color e background-image sono vecchie notizie. Per fortuna c'è sempre qualcosa di nuovo da imparare.

Prova a dare una spinta alle tue scatole con CSS box-shadow. I tuoi elementi HTML non sono mai stati così belli!

Condividere Condividere Tweet E-mail Come usare CSS box-shadow: 13 trucchi ed esempi

Le scatole insignificanti sembrano noiose. Abbelliscili con l'effetto box-shadow CSS!

Leggi Avanti Argomenti correlati
  • Programmazione
  • Sviluppo web
  • Web design
  • CSS
Circa l'autore Marcus Mears III(26 articoli pubblicati)

Marcus è un appassionato di tecnologia da una vita e redattore scrittore al MUO. Ha intrapreso la sua carriera di scrittore freelance nel 2020, coprendo tecnologia di tendenza, gadget, app e software. Ha studiato Informatica al college con particolare attenzione allo sviluppo web front-end.

Altro da Marcus Mears III

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti