Teoria
Teoria

Proprietà background-color

Il colore di sfondo può essere impostato utilizzando la proprietà CSS background-color.

Ecco un esempio di utilizzo della proprietà:

selector {
  background-color: #ff0000;
}

I colori nei CSS possono essere specificati in diversi formati: in esadecimale, in RGB o RGBA, o con costanti di colore come red o green.

Ecco alcuni esempi di come viene impostato il colore di sfondo rosso in diversi formati:

background-color: red;
background-color: #ff0000;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0);

index.html
style.css

HTML

<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Proprietà background-color</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> <div class="block block4"></div> </body> </html>

CSS

body { padding: 10px; text-align: center; } .block { display: inline-block; width: 192px; height: 192px; margin: 5px; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { } .block2 { } .block3 { } .block4 { }

ObiettiviFatto

Impostare il colore di sfondo:

al primo blocco è #2ecc71,
al secondo blocco è #3498db,
il terzo blocco è #e74c3c,
il quarto blocco è #e67e22.