Contenuto

• Al passo
• Metodo 1 di 4: impostazione di un colore di sfondo a tinta unita
• Metodo 2 di 4: utilizzo di un'immagine come sfondo
• Metodo 3 di 4: crea uno sfondo sfumato
• Metodo 4 di 4: imposta un'animazione a colori come sfondo

Per poter impostare lo sfondo di una pagina web in HTML, è sufficiente apportare una piccola modifica all'elemento "body" all'interno del stile> / stile> tag. I passaggi dipendono da come desideri che appaia lo sfondo. Scopri come impostare lo sfondo del tuo sito web come un'animazione a tinta unita, immagine, sfumatura o colore.

Al passo

Metodo 1 di 4: impostazione di un colore di sfondo a tinta unita

1. Apri il tuo file HTML nel tuo editor di testo preferito. A partire da HTML5, l'attributo HTML bgcolor> non è più supportato. Il colore di sfondo, come tutti gli altri aspetti stilistici della tua pagina, deve essere impostato con CSS.
2. Aggiungi il stile> / stile> contrassegna il tuo documento. Tutti i dati di stile per la tua pagina (incluso il colore di sfondo) devono essere codificati all'interno di questi tag. Hai il stile> tag già indicati, quindi puoi semplicemente scorrere fino a quella parte del file.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Digita l'elemento "body" all'interno del file stile> / stile> tag. Tutto ciò che modifichi nell'elemento "body" in CSS influenzerà l'intera pagina.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Aggiungi la proprietà "background-color" all'elemento "body". In questo contesto funzionerà solo un'ortografia di "colore" (non: colore).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Posiziona il colore di sfondo desiderato dietro "background-color". Ora puoi indicare il nome di un colore (verde, blu, ed, ecc.), utilizzare codici esadecimali (esadecimali) (es. #000000 per il nero, # ff0000 per il rosso, ecc.) o digitando il valore RGB per il colore (come rgb (255,255,0) per il giallo). Di seguito è riportato un esempio con codici esadassimali, che rendono lo sfondo uguale al banner wikiHow:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Bianca: #FFFFFF
   • Rosa chiaro: # FFCCE6
   • Terra di Siena bruciata: #993300
   • Indaco - # 4B0082
   • Viola - # EE82EE
   • Controlla il selettore di colori HTML di w3schools.com per trovare i codici esadecimali di qualsiasi colore tu voglia.
6. Usa "background-color" per applicare i colori di sfondo ad altri elementi. Proprio come hai impostato l'elemento del corpo, puoi usare il colore di sfondo per impostare gli sfondi di altri elementi. Basta posizionare quegli elementi all'interno del file stile> / stile> con la proprietà background-color.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {background-color: arancione; } p {background-color: rgb (255,0,0); } / style> / head> body> h1> Questa intestazione ha uno sfondo arancione / h1> p> Questo paragrafo ha uno sfondo rosso / p> / body> / html>

Metodo 2 di 4: utilizzo di un'immagine come sfondo

1. Apri il file HTML in un editor di testo. Molte persone preferiscono utilizzare un'immagine come sfondo per il proprio sito web. Con questo puoi impostare un motivo, una trama, una foto o qualsiasi altra immagine come sfondo. Da HTML5, tutti gli sfondi devono essere impostati con CSS (Cascading Style Sheets) all'interno del file stile> / stile> tag.
2. Aggiungi il stile> / stile> tag al tuo file HTML. Tutti i dati di stile per la tua pagina (incluso il colore di sfondo) dovrebbero essere indicati all'interno di questi tag. Hai già stile> tag impostati, scorri fino a quella parte del file.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Digita l'elemento "body" all'interno del file stile> / stile> tag. Tutto ciò che modifichi nell'elemento "body" in CSS influenzerà l'intera pagina.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Aggiungi la proprietà "background-image" all'elemento "body". Quando aggiungi questa proprietà avrai bisogno del nome del file della tua immagine. Assicurati che l'immagine sia salvata nella stessa cartella del file html (o aggiungi il percorso completo del file al tuo server web).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); colore di sfondo: # 93B874; } / style> / head> body> / body> / html>

   • È una buona idea includere il codice colore di sfondo nel caso in cui l'immagine di sfondo non venga caricata.
5. Sovrapponi più immagini. Puoi impilare più immagini l'una sull'altra. Questo può essere utile se hai immagini con sfondi trasparenti che si completano a vicenda quando vengono sovrapposte.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); colore di sfondo: # 93B874; } / style> / head> body> / body> / html>

   • La prima immagine è in alto. La seconda immagine è sotto la prima.

Metodo 3 di 4: crea uno sfondo sfumato

1. Usa CSS per creare uno sfondo sfumato. Se stai cercando qualcosa di un po 'più stilizzato di un colore solido, ma non così impegnato come un'animazione a colori, prova uno sfondo sfumato. Le sfumature sono colori che cambiano in altre uguaglianze. Puoi utilizzare CSS per creare e regolare il gradiente. Prima di iniziare a creare una sfumatura di colore, è necessario acquisire una conoscenza sufficiente delle basi della formattazione di una pagina Web con CSS.
2. Comprendi la sintassi standard. Quando crei una sfumatura, ci sono due informazioni di cui avrai bisogno: il punto di partenza e l'angolo di partenza ei colori tra i quali avverrà la transizione. È possibile selezionare più colori che si sovrappongono tutti e specificare una direzione o un angolo per il gradiente.

   sfondo: gradiente lineare (direzione / angolo, colore1, colore2, colore3, ecc.);

3. Crea una sfumatura verticale. Se non indichi una direzione, il colore andrà dall'alto verso il basso. Browser diversi hanno versioni differenti della funzione gradiente, quindi dovrai aggiungere versioni differenti del codice.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Ciò è necessario per garantire che il gradiente si estenda sull'intera pagina * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: linear-gradient (# 93B874, # C9DCB9); / * Sintassi predefinita (deve essere l'ultima) * / background-color: # 93B874; / * È una buona idea impostare un colore di sfondo, nel caso in cui il gradiente non venga caricato * /} / style> / head> body> / body> / html>

4. Crea una sfumatura con una direzione. L'aggiunta di una direzione al gradiente consente di regolare il modo in cui il colore cambia. Tieni presente che browser diversi interpreteranno le direzioni in modo diverso. Mostreranno tutti lo stesso gradiente di colore.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {background: -webkit-linear-gradient (a sinistra, # 93B874, # C9DCB9); / * da sinistra a destra * / background: -o-linear-gradient (right, # 93B874, # C9DCB9); / * fine a destra * / background: -moz-linear-gradient (a destra, # 93B874, # C9DCB9); / * fine a destra * / background: linear-gradient (a destra, # 93B874, # C9DCB9); / * si sposta a destra * / background-color: # 93B874; / * è una buona idea impostare un colore di sfondo, nel caso in cui il gradiente non venga caricato * /} / style> / head> body> / body> / html>

5. Usa altre proprietà per regolare il gradiente. Puoi fare molto di più con i gradienti.
   • Ad esempio, non solo puoi usare più di due colori, ma anche inserire una percentuale dietro ciascuno. Con questo puoi indicare quanto spazio avrà ogni segmento di colore.

     sfondo: gradiente lineare (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Aggiungi trasparenza ai colori. Con questo puoi sfumare i colori. Usa lo stesso colore per sfumare dal colore al nulla. Amerai la funzione rgba () deve essere utilizzato per indicare il colore. Il valore finale determina il grado di trasparenza: 0 per opaco e 1 per trasparente.

     sfondo: gradiente lineare (a destra, rgba (147,184,116,0), rgba (147,184,116,1));

Metodo 4 di 4: imposta un'animazione a colori come sfondo

1. Navigare verso stile> nel codice HTML. Se trovi un colore di sfondo a tinta unita ma non, prova a cambiare lo sfondo a colori. Da HTML 5, i colori di sfondo devono essere definiti con CSS (Cascading Style Sheets). Se non hai mai impostato un colore di sfondo con CSS, leggi la sezione sull'impostazione di un colore di sfondo a tinta unita prima di provare questo metodo.
2. Aggiungi la proprietà animazione all'elemento "corpo". Dovrai aggiungere 2 proprietà diverse, poiché ogni browser richiede un codice diverso.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animazione: cambio colore anni '60 infinito; } / style> / head> body> / body> / html>

   • -webkit-animation la proprietà è richiesta per i browser basati su Chrome (Chrome, Opera, Safari). animazione è lo standard per tutti gli altri browser.
   • cambio di colore è ciò che viene chiamato l'animazione in questo esempio.
   • Anni '60 è la durata (60 secondi) dell'animazione / transizione. Assicurati di impostarlo sia per il webkit che per la sintassi predefinita.
   • infinito indica che l'animazione deve ripetersi all'infinito. Se preferisci ripetere i colori e poi fermarti all'ultimo colore, puoi omettere questa parte.
3. Aggiungi colori alla tua animazione. Ora utilizzerai la regola @keyframes per impostare i colori di sfondo da attraversare, nonché per quanto tempo ogni colore può essere visto sulla pagina. Di nuovo, dovrai aggiungere più codifiche per i vari browser.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animazione: cambio colore anni '60 infinito; } @ -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>

   • Notare che le due linee (@ -webkit-keyframes e @keyframes hanno gli stessi valori per i colori di sfondo e le percentuali. Dovrebbe rimanere uniforme in modo che l'esperienza rimanga la stessa per tutti i browser.
   • Le percentuali (0%, 25%, ecc.) rappresentano la durata totale dell'animazione (Anni '60). Quando la pagina viene caricata, lo sfondo avrà il colore impostato su 0% e (# 33FFF3). Quando il 25% o 60 secondi dell'animazione sono stati riprodotti, lo sfondo passerà a # 78281F, e così via.
   • È possibile regolare la durata e i colori come desiderato.