Usare un Colore a Tinta Unita Passi Iniziali Usare un Gradiente Come Sfondo Creare uno Sfondo Animato
Dovrebbe essere visibile nella parte superiore del file. Digita il codice background-color: all'interno delle parentesi graffe dell'elemento "body". Arrivato a questo punto l'elemento "body" dovrebbe apparire come segue:   body {     background-color:  }   In questo contesto puoi utilizzare solo la parola chiave "color" e non "colour". Digitalo dopo il parametro "background-color:" e aggiungi un punto e virgola finale. Se per esempio vuoi usare il rosa come colore di sfondo, il codice da usare dovrebbe essere il seguente:  body {     background-color: #d24dff; } Arrivato a questo punto la sezione HTML del tuo file dovrebbe assomigliare alla seguente:   <!DOCTYPE html> <html> <head> <style> body { background-color: #d24dff } </style> </head> </html> Esattamente come hai fatto per l'elemento "body" puoi usare il parametro "background-color" per definire il colore dello sfondo di altre parti della pagina, come intestazioni, paragrafi e così via. Per esempio se vuoi modificare il colore dello sfondo dell'intestazione principale della pagina (caratterizzata dal tag <h1>) o di un paragrafo (caratterizzato dal tag <p>) dovrai utilizzare un codice simile al seguente:  <!DOCTYPE html> <html> <head> <style> body {     background-color: #93B874; } h1 {     background-color: #00b33c; } p {     background-color: #FFFFFF); } </style> </head> <body> <h1>Intestazione con sfondo verde</h1> <p>Paragrafo con sfondo bianco</p> </body> </html> I colori in HTML sono contraddistinti da codici basati sulle diverse sfumature. Puoi utilizzare lo strumento gratuito "HTML Color Picker" fornito dal sito web W3Schools HTML per individuare il codice del colore che vuoi utilizzare:  Visita il sito https://www.w3schools.com/colors/colors_picker.asp usando il browser internet del computer. Clicca sul colore di base che desideri usare visualizzato all'interno della sezione "Pick a Color". Seleziona la sfumatura che preferisci visualizzata all'interno dell'elenco visibile sul lato destro della pagina. Prendi nota del codice alfanumerico riportato accanto alla sfumatura del colore di base che hai scelto di usare come sfondo. Con il rilascio dello standard HTML5 l'attributo HTML <bgcolor> non è più supportato. Il colore dello sfondo di una pagina, così come tutti gli altri aspetti dello stile, dovrebbero essere gestiti tramite i fogli di stile CSS. Se stai usando un computer Windows, puoi utilizzare Notepad++ o l'editor Blocco note, mentre se stai usando un Mac puoi utilizzare l'editor TextEdit o BBEdit. Tutte le informazioni relative allo stile grafico della pagina web (incluso il colore dello sfondo) dovrebbero essere inserite all'interno dei tag <style></style> tags:  <!DOCTYPE html> <html> <head> <style> </style>  </head> </html> Ti servirà una riga di testo vuota per poter inserire le informazioni. Creane una sotto al tag <style> e prima del tag </style>. Digita il seguente codice all'interno dei tag <style></style>:   body {  }   Qualsiasi codice inserirai all'interno dell'elemento "body" del foglio di stile CSS avrà un effetto diretto sull'intera pagina web. Se vuoi usare un gradiente come sfondo della pagina, salta questo passaggio e fai riferimento a  questa sezione dell'articolo. Dovrebbe essere visibile nella parte superiore del file. Quando devi creare un gradiente da usare come sfondo di una pagina web occorre gestire due tipi di informazioni: il punto di inizio/angolo e i colori del gradiente con cui effettuare la transizione. Puoi creare un gradiente utilizzando colori multipli per effettuare la transizione e la direzione in cui si dovrà sviluppare. Ecco la sintassi da usare per utilizzare un gradiente di colori:  background: linear-gradient(direzione/angolo, colore_1, colore_2, colore_3, eccetera); Se non specifichi una direzione o un angolo il gradiente verrà creato verticalmente, cioè la transizione del colore si svilupperà dall'alto verso il basso. Per creare un gradiente di questo tipo inserisci il seguente codice all'interno dei tag <style></style> del tuo file HTML:   html {     min-height: 100%;  } body {     background: -webkit-linear-gradient(#93B874, #C9DCB9);      background: -o-linear-gradient(#93B874, #C9DCB9);      background: -moz-linear-gradient(#93B874, #C9DCB9);      background: linear-gradient(#93B874, #C9DCB9);      background-color: #93B874;  }   Browser internet diversi adottano un modo differente per creare l'effetto grafico del gradiente, quindi hai la necessità di includere più di una versione del codice HTML per preservare la compatibilità. Se preferisci creare un gradiente personalizzato con un effetto grafico più complesso, puoi specificare la direzione in cui si dovrà sviluppare la transizione dei colori che vuoi includere nel gradiente. In questo caso dovrai inserire il seguente codice all'interno dei tag <style></style>:   html {     min-height: 100%; }  body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);      background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  }   Puoi provare a usare i parametri "left" e "right" per la direzione del gradiente in modo da poter avere un'idea dei rispettivi effetti grafici che otterrai. In questo modo il colore verrà sfumato. Ricorda che in questo caso dovrai utilizzare il medesimo colore perché l'effetto della sfumatura sia coerente. Utilizza la funzione rgba() per definire il colore da usare. Il parametro finale determinerà il livello della trasparenza: 0 per usare la tonalità massima del colore specificato o 1  il livello massimo di trasparenza.  background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1)); Il codice finito per creare un gradiente di colori da usare come sfondo per una pagina web sarà simile al seguente:  <!DOCTYPE html> <html> <head> <style> html {     min-height: 100%; }   body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);     background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  } </style> </head> <body> </body> </html> Dovrebbe essere visibile nella parte superiore del file. Inserisci il seguente codice all'interno delle parentesi graffe dell'elemento "body":       -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite;   La prima linea di codice garantisce la compatibilità del codice HTML con i browser basati sul progetto Chromium, mentre la seconda linea di codice garantisce la compatibilità con tutti gli altri browser internet. Adesso per specificare i colori che verranno utilizzati per riprodurre la transizione animata dello sfondo dovrai utilizzare il parametro "@keyframes" e specificare per quanto tempo ogni colore dovrà essere visibile sulla pagina. Anche in questo caso, per preservare la compatibilità con i browser in commercio, dovrai utilizzare più versioni di codice. Digita il seguente testo dopo la parentesi graffa chiusa dell'elemento CSS "body":   @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }   Nota che le due regole (@-webkit-keyframes e @keyframes utilizzano i medesimi colori e le medesime percentuali. Questi valori devono essere identici in modo che l'animazione grafica risulti uguale indipendentemente dal browser utilizzato. Le percentuali (0%, 25%, eccetera) sono relative alla lunghezza totale dell'animazione (60s). Quando la pagina web verrà caricata, il colore dello sfondo sarà determinato dai parametri 0% (#33FFF3). Quando l'animazione raggiungerà il 25% dei 60 secondi della sua durata complessiva il colore dello sfondo sarà #7821F e così via, in base alle istruzioni indicate nel codice HTML. Puoi personalizzare le tempistiche e i colori dell'animazione in base alle tue esigenze. Arrivato a questo punto il codice HTML che gestisce lo sfondo animato della tua pagina web dovrebbe essere simile al seguente:  <!DOCTYPE html> <html> <head> <style> body {     -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite; } @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }    </style> </head> <body> </body> </html>
Individua la sezione "html" del documento. Aggiungi la proprietà "background-color" all'elemento di stile "body". Inserisci il codice del colore che vuoi usare come sfondo. Esamina il codice che hai creato fino ad ora. Usa il parametro "background-color" per modificare il colore dello sfondo degli altri elementi della pagina. Determina il colore che vuoi usare come sfondo. Apri il documento HTML della pagina web che vuoi modificare utilizzando l'editor di testo che preferisci. Aggiungi la sezione "html" al documento HTML. Crea una riga vuota all'interno dei tag "style". Inserisci l'elemento "body". Individua la sezione "html" del documento. Comprendi la sintassi di base per eseguire questo tipo di modifica. Crea un gradiente verticale. Crea un gradiente direzionale. Aggiungi una trasparenza ai colori. Esamina il codice HTML completo. Individua la sezione "html" del documento. Aggiungi l'attributo "animation" all'elemento CSS "body". Aggiungi i colori per l'animazione. Esamina il codice finale.
https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML
Setting a Solid Background Color Preparing to Edit Your HTML Creating a Gradient Background Creating a Changing Background