Regola il colore di sfondo in html

Per impostare lo sfondo di una pagina web in HTML, tutto ciò che devi fare è apportare una piccola modifica all`elemento `body` all`interno del tag. I passaggi dipendono da come vuoi che appaia il tuo sfondo. Scopri come impostare lo sfondo del tuo sito web come animazione a tinta unita, immagine, sfumatura o colore.

Passi

Metodo 1 di 4: impostazione di un colore di sfondo solido

Immagine titolata 2609629 1 1
1. Apri il tuo file HTML nel tuo editor di testo preferito. A partire da HTML5, l`attributo HTML
Immagine titolata 2609629 2 1
2. Aggiungi il tagga 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 tag già indicati, quindi puoi semplicemente scorrere fino a quella parte del file.
Immagine titolata 2609629 3 1
3. Scrivilo "corpo"-elemento all`interno del tag. Tutto quello che cambi al riguardo "corpo"-elemento in CSS, interesserà l`intera pagina.
Immagine titolata 2609629 4 1
4. Aggiungi il "colore di sfondo"-attribuire al "corpo"-elemento. In questo contesto, solo un`ortografia di "colore" lavoro (quindi no: colore).
Immagine titolata 2609629 5 1
5. Posiziona il colore di sfondo desiderato dietro "colore di sfondo". Ora puoi indicare il nome di un colore (verde, blu, rosso, eccetera.), utilizzare codici esadecimali (esadecimali) (ad es. #000000 per il nero, #ff0000 per il rosso, ecc.) o digitando il valore RGB per il colore (ad es RGB(255,255,0) per il giallo). Di seguito è riportato un esempio con codici esadecimali, rendendo lo sfondo uguale al banner:
  • Bianco: #FFFFFF
  • Rosa chiaro: #FFCCE6
  • terra di Siena bruciata: #993300
  • Indaco - #4B0082
  • Viola - #EE82EE
  • guarda al w3scuole.com Selettore colore HTML per trovare i codici esadecimali di qualsiasi colore desideri.
  • Immagine titolata 2609629 6 1
    6. Utilizzo "colore di sfondo" per applicare i colori di sfondo ad altri elementi. Proprio come hai impostato l`elemento body, puoi usare il colore di sfondo per impostare gli sfondi di altri elementi. Basta posizionare quegli elementi all`interno del con la proprietà background-color.

    Metodo 2 di 4: Utilizzo di un`immagine come sfondo

    Immagine titolata 2609629 7 1
    1. Apri il file HTML in un editor di testo. Molte persone preferiscono utilizzare un`immagine come sfondo per il proprio sito web. Ti consente di 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 tag.
    Immagine titolata 2609629 8 1
    2. Aggiungi il tagga il tuo file HTML. Tutte le informazioni sullo stile per la tua pagina (incluso il colore di sfondo) devono essere specificate all`interno di questi tag. Hai già tag impostati, quindi scorrere fino a quella parte del file.
    Immagine titolata 2609629 9 1
    3. Scrivilo "corpo"-elemento all`interno del tag. Tutto quello che cambi al riguardo "corpo"-elemento in CSS influenzerà l`intera pagina.
    Immagine titolata 2609629 10 1
    4. Aggiungi la proprietà "immagine di sfondo" pronto per questo "corpo"-elemento. Quando aggiungi questa proprietà avrai bisogno del nome del file della tua immagine. Assicurati che l`immagine sia archiviata nella stessa cartella del file html (o aggiungi il percorso completo del file al tuo server web).
  • È una buona idea includere anche il codice colore di sfondo nel caso in cui l`immagine di sfondo non venga caricata.
  • Immagine titolata 2609629 11 1
    5. Sovrapporre più immagini. Puoi impilare più immagini una sopra l`altra. Questo può essere utile se hai immagini con sfondi trasparenti che si completano a vicenda quando sovrapposti.
  • La prima immagine è in alto. La seconda immagine è sotto la prima.
  • Metodo 3 di 4: creazione di uno sfondo sfumato

    Immagine titolata 2609629 12
    1. Usa i CSS per creare uno sfondo sfumato. Se stai cercando qualcosa di un po` più stilizzato di un tinta unita, ma non così impegnato come a animazione a colori, prova una sfumatura di colore come sfondo. I gradienti sono colori che passano ad altri chiari. Puoi usare CSS per creare e personalizzare il tuo gradiente. Prima di iniziare a creare un gradiente, devi acquisire una conoscenza sufficiente delle basi della formattazione di una pagina Web con CSS.
    Immagine titolata 2609629 13
    2. Comprendere la sintassi standard. Quando crei un gradiente, sono necessarie due informazioni: il punto iniziale e l`angolo iniziale e i colori tra i quali avverrà la transizione. È possibile selezionare più colori che si fondono tutti insieme e specificare una direzione o un angolo per la sfumatura del colore.
    sfondo: gradiente lineare (direzione/angolo, colore1, colore2, colore3, ecc.);
    Immagine titolata 2609629 14
    3. Crea un gradiente verticale. Se non indichi una direzione, il colore andrà dall`alto verso il basso. Browser diversi hanno versioni diverse della funzione gradiente, quindi dovrai aggiungere versioni diverse del codice.
    Immagine titolata 2609629 15
    4. Crea un gradiente con direzione. L`aggiunta di una direzione al gradiente ti dà la possibilità di regolare il modo in cui il colore cambia. Tieni presente che browser diversi interpreteranno le indicazioni in modo diverso. Mostreranno tutti lo stesso gradiente.
    Immagine titolata 2609629 16
    5. Usa altre proprietà per regolare il gradiente. Puoi fare molto di più con i gradienti.
  • Ad esempio, non solo puoi utilizzare più di due colori, ma anche inserire una percentuale dietro ciascuno di essi. Consente di specificare quanto spazio avrà ciascun segmento di colore.
    sfondo: gradiente lineare (#93B874 10%, #C9DCB9 70%, #000000 90%);
  • Aggiungi trasparenza ai colori. Consente di sfumare i colori. Usa lo stesso colore per sfumare dal colore al nulla. Avrai la funzione rgba() deve usare per indicare il colore. Il valore terminale 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

    Immagine titolata 2609629 17
    1. Navigare verso nel tuo codice HTML. Se non ti piace uno sfondo a tinta unita, prova con sfondi di colore diverso. 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 su come impostare un colore di sfondo solido prima di provare questo metodo.
    Immagine titolata 2609629 18
    2. Aggiungi la proprietàanimazione pronto per questo "corpo"-elemento. Dovrai aggiungere 2 diverse proprietà, perché ogni browser richiede un codice diverso.
  • -animazione del webkit è la proprietà richiesta per i browser basati su Chrome (Chrome, Opera, Safari). animazione è l`impostazione predefinita per tutti gli altri browser.
  • cambio di colore è quella che in questo esempio viene chiamata animazione.
  • 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 essere ripetuta all`infinito. Se preferisci avvolgere i semi e poi fermarti all`ultimo seme, puoi omettere questo pezzo.
  • Immagine titolata 2609629 19
    3. Aggiungi colori alla tua animazione. Ora utilizzerai la regola @keyframes per impostare i colori di sfondo da scorrere, nonché per quanto tempo ciascun colore appare sulla pagina. Ancora una volta, dovrai aggiungere più codifiche per i diversi browser.
  • Si noti che le due righe (@-webkit-fotogrammi chiave e @fotogrammi chiave hanno gli stessi valori per i colori e le percentuali di sfondo. Deve rimanere uniforme in modo che l`esperienza rimanga la stessa per tutti i browser.
  • Le percentuali (0%, 25%, eccetera.) rappresentano la durata totale dell`animazione (anni `60). Quando la pagina viene caricata, lo sfondo avrà il colore impostato su 0% e (#33FFF3). Dopo aver riprodotto il 25% o 60 secondi dell`animazione, lo sfondo passerà a #78281F, e così via.
  • Puoi regolare la durata e i colori a tuo piacimento.

  • Condividi sui social network: