Nella creazione di qualsiasi sito, oltre alla funzionalità, il design è molto importante. Questo è ciò che definisce lo stile e il design di una particolare azienda o persona per la quale viene creato il sito. Regolare il colore di sfondo e la sua immagine non è difficile, seguendo le istruzioni in questo articolo.
Apri il tuo file HTML utilizzando Blocco note o qualsiasi altro editor di testo a cui sei abituato. Ad esempio, prendiamo una pagina di un sito web primitivo con un minimo di testo. Puoi aprire il tuo file utilizzando qualsiasi browser.
Entra nel tag parametro bgcolor="*****", dove ***** è il codice a colori. Puoi scoprire i colori per HTML in qualsiasi editor grafico selezionando l'opzione "per il web" o sul sito Web https://colorscheme.ru/color-names
- style="immagine-sfondo: url('file:///C:/Users/FILE_PATH.jpg')"
Tieni presente che per gli utenti con una risoluzione dello schermo più elevata, l'immagine verrà duplicata in basso e a destra. Non sembrerà buono se l'immagine non è chiara. Ci sono comandi speciali per correggere questa impostazione.
- background-repeat: "Valore". Le opzioni per il tuo valore potrebbero essere: "repeat-x" - ripete l'immagine di sfondo sia orizzontalmente che verticalmente. "repeat-y" - ripeti solo verticalmente. "no-repeat" - l'immagine è bloccata in posizione e non si ripete. "spazio" - l'intera pagina verrà riempita con il numero massimo di copie dell'immagine, quelle esterne verranno tagliate. "rotondo" - la stessa opzione, ma i bordi dell'immagine verranno ridimensionati con precisione;
- sfondo-allegato: "Valore". Se sostituisci il tag "scorri" al posto della parola Valore, l'immagine scorrerà insieme al sito. "fisso" - durante lo scorrimento, lo sfondo rimane invariato;
- dimensione dello sfondo: Valore Valore2. Qui, i valori devono assumere un valore in pixel. Ad esempio: 100px 200px. Oltre ai pixel, vengono accettati valori percentuali. Questa è un'opzione per riempire la pagina con un'immagine. Oltre ai numeri, puoi inserire due parametri: " contiene" - riempie la pagina con un'immagine lungo il lato lungo e "copertina" - riempie la pagina con un'immagine lungo la larghezza.
Conoscendo le basi per riempire una pagina con uno sfondo in HTML, sei pronto per creare il tuo primo sito web.
Vlad Merzevich
Per le peculiarità delle pagine web, le immagini di sfondo acquisiscono un ruolo significativo nel layout dei documenti del sito. Allo stesso tempo, sono attivamente coinvolti in una varietà di attività, come automatizzare il processo di allegare immagini al testo, creare transizioni sfumate e, naturalmente, aggiungere uno sfondo sotto il contenuto. Di seguito sono riportati alcuni aspetti dell'utilizzo delle immagini di sfondo.
Sfondo su una pagina web
L'impostazione dell'immagine di sfondo su una pagina Web viene tradizionalmente eseguita tramite l'attributo background del tag
. Tale schema viene ripetuto orizzontalmente e verticalmente, riempiendo in questo modo l'intera finestra del browser. Chiaramente, qui non ci sono opzioni speciali per la creatività, quindi passiamo agli stili e vediamo cosa possiamo fare con i CSS.Ci sono cinque attributi in CSS che controllano un'immagine di sfondo: il suo inserimento, posizione e ripetizione. Tuttavia, tutti questi parametri vengono sostituiti da un background di proprietà universale e lo utilizzeremo in futuro.
Aggiunta di un'immagine di sfondo
L'aggiunta di un'immagine avviene impostando l'indirizzo dell'immagine tramite la parola chiave url. Gli argomenti no-repeat (nessuna ripetizione), repeat-x (ripetizione orizzontale) e repeat-y (ripetizione verticale) vengono utilizzati per controllare il modo in cui l'immagine si ripete. Ciò si traduce nella pagina web mostrata in Fig. uno.
Per impostare un'immagine su una pagina Web, aggiungi la proprietà dello stile di sfondo al selettore BODY, come mostrato nell'esempio 1.
Esempio 1. Immagine di sfondo
In questo esempio, il grafico target.gif è definito come lo sfondo della pagina web senza ripetere l'immagine. Per evitare che l'immagine aderisca ai bordi del browser, viene spostata di 30 pixel a destra e di 20 pixel in basso rispetto alla sua posizione originale.
ripetizione del modello
Con la possibilità di impostare l'immagine di sfondo in modo che si ripeta orizzontalmente o verticalmente, sono disponibili diverse opzioni di progettazione di pagine Web. Ad esempio, per creare una striscia verticale lungo il bordo sinistro (Fig. 2), è necessaria l'immagine mostrata in Fig. 3.
Il disegno dovrebbe essere tale che si unisca verticalmente senza cuciture evidenti e formi anche un tutto unico con il colore di sfondo dato della pagina web. L'esempio 2 mostra come creare un'immagine di sfondo di questo tipo, usando ancora la proprietà background e il suo valore repeat-y .
Esempio 2: ripeti lo sfondo verticalmente
Allo stesso modo, puoi ripetere lo sfondo in orizzontale, ad esempio creando un gradiente e impostandolo come immagine di sfondo (Fig. 4).
Per ottenere la pagina web mostrata in Fig. 4, dovrai prima creare un'immagine con una transizione graduale. La larghezza è sufficiente per specificare 20-40 pixel e l'altezza dell'immagine dipende dallo scopo del documento e dall'altezza prevista del contenuto della pagina web. Inoltre, non dimenticare che un disegno di grandi dimensioni comporterà un aumento delle dimensioni del file grafico. E questo influenzerà negativamente la velocità del suo caricamento e, in definitiva, rallenterà la visualizzazione dello sfondo. Per questo caso, un'immagine di 30x200 pixel era abbastanza adatta (Fig. 5).
L'esempio 3 mostra il codice HTML per creare uno sfondo sfumato.
Esempio 3: ripetizione dello sfondo orizzontalmente
L'immagine sfumata funziona bene con il blocco di colore solido, quindi questo esempio aggiunge un livello per visualizzare il contenuto della pagina web.
Aggiunta di un'immagine al testo
Con un'immagine di sfondo, puoi automatizzare il processo di aggiunta di immagini a un testo specifico, come i titoli. A tale scopo, utilizzare la proprietà background universal, che viene applicata al selettore desiderato. Come valore, specificare il percorso dell'immagine e, in modo che non si ripeta, l'argomento no-repeat (esempio 4).
Esempio 4: aggiunta di un'immagine
intestazione
Testo principale
Come mostrato in questo esempio, l'immagine può essere spostata orizzontalmente e verticalmente dalla sua posizione originale, per impostazione predefinita questo è l'angolo superiore sinistro dell'elemento del blocco. Lo spostamento dello sfondo consente di impostare l'immagine in relazione al testo nel modo desiderato. Per evitare che il testo si sovrapponga all'immagine, assicurati di aggiungere la proprietà padding-left, a causa della quale il testo viene spostato a destra della distanza specificata. È individuale in ogni caso e di solito è uguale alla larghezza dell'immagine più la spaziatura desiderata tra l'immagine e il testo.
Impostare un colore di sfondo e/o un'immagine per una pagina o un singolo elemento è abbastanza semplice. La cosa principale è sapere dove e come farlo, oltre ad avere un codice colore e/o un'immagine di sfondo. È possibile che imparerai molto da questo articolo, ma l'ho creato appositamente per i principianti. Pertanto, tutto sarà il più breve e dettagliato possibile allo stesso tempo. La cosa principale è che otterrai non solo un'idea generale ed esempi già pronti, ma anche una comprensione di come creare uno sfondo in HTML.
Per impostare lo sfondo in HTML usa DOCTYPE intermedio
E inizierò con il fatto che HTML5 non c'è modo di impostare. È stato deciso di portare questa funzionalità nei CSS. Pertanto, se prevedi di utilizzare quanto segue e desideri ottenere un codice valido (corretto), devi fermarti al tipo di documento transitorio. Per fare ciò, la tua pagina web deve iniziare con la seguente riga:
di transizione//IT" "http://www.w3.org/TR/html4/loose.dtd">
Ora che ne abbiamo parlato, passiamo alla comprensione di come viene creato lo sfondo. E la prima cosa da notare qui è la differenza tra colore di sfondo e immagine di sfondo. All'inizio va colore di sfondo, che riempie l'intero spazio disponibile della pagina o del suo elemento. Su di esso è sovrapposta una ripetizione immagine di sfondo. Visivamente, questo può essere rappresentato come segue:
Lo sfondo di un documento HTML e dei suoi elementi
La seconda cosa che devi sapere è la differenza tra corpo del documento e elemento del documento. Corpo del documento indicato nel codice HTML della pagina web dal tag BODY, che include tutto il contenuto della pagina web. Ovviamente, lo sfondo del corpo del documento non può essere trasparente. Se lo sfondo del corpo del documento non è impostato, viene utilizzato il valore predefinito impostato nelle impostazioni del browser.
Elementi della pagina sono all'interno del tag BODY. È interessante notare che non è possibile impostare il colore e/o l'immagine di sfondo utilizzando HTML per tutti gli elementi del documento. Ad esempio, un'immagine di sfondo può essere specificata solo per le tabelle. Per impostazione predefinita, di solito hanno uno sfondo trasparente.
L'attributo bgcolor per creare il colore di sfondo
Per impostare colore di sfondo il documento o i suoi elementi utilizzano l'attributo bgcolor, ad esempio:
In questo caso, stiamo impostando il colore di sfondo per la pagina nel suo insieme. Ed ecco un esempio di come impostare il colore di sfondo per una tabella, nel tag TABLE:
| Testo con sfondo |
È interessante notare che il colore di sfondo nella tabella può essere specificato sia per le righe nel tag TR che per le loro celle nel tag TD.
Come trovare il codice colore?
Probabilmente hai già notato che il colore in HTML è impostato da uno speciale codice, ad esempio: #ec008c . Per conoscere il codice del colore di cui hai bisogno puoi utilizzare uno degli editor grafici. Ad esempio, in Photoshop puoi usare " Strumento per il collirio» (Pipetta) per ottenere il colore da un punto dell'immagine. Quindi, devi fare clic sul colore risultante sulla barra degli strumenti e nella finestra che si apre " color Picker» (Seleziona colore) copia il codice colore.
Attiro la vostra attenzione sul fatto che questo codice sarà senza il cancelletto (#) all'inizio, questo segno dovrà essere aggiunto manualmente.
Puoi anche utilizzare numerosi servizi online, ad esempio:
- eccetera.
Il loro principio di funzionamento è ancora più semplice: fai clic sul colore desiderato e ottieni il suo codice.
L'attributo background per creare un'immagine di sfondo
Così come nel caso del colore di sfondo e nel caso di immagine di sfondo, È necessario utilizzare un attributo speciale, ovvero background , ad esempio:
In questo caso, impostiamo l'immagine di sfondo per la pagina nel suo insieme. È interessante notare che a causa della limitazione delle dimensioni dell'immagine, verrà ripetuto, ad esempio:
Come puoi vedere, quando si ripete, la transizione tra le immagini è evidente. Pertanto, vengono spesso utilizzate immagini speciali, in cui viene preso in considerazione questo momento.
Ed ecco un esempio di come impostare un'immagine di sfondo per una tabella, nel tag TABLE:
| Testo con sfondo |
È interessante notare che l'immagine di sfondo può essere impostata solo per la tabella nel suo insieme e/o per la sua singola cella. Non funzionerà per una stringa.
Percorso assoluto e relativo dell'immagine di sfondo
Particolare attenzione dovrebbe essere prestata indirizzo immagine di sfondo. In questo caso viene utilizzato un percorso relativo all'immagine, ad es. l'indirizzo è relativo alla posizione del file immagine nel file della pagina web. Questa opzione non può essere definita particolarmente efficace. È meglio utilizzare il percorso assoluto dell'immagine, ad es. il suo URL completo, Per esempio:
In questo caso, non avrai problemi associati. Puoi leggere di più su questo.
Riassumendo
L'uso degli attributi bgcolor e background è obsoleto, quindi dovrai utilizzare un DOCTYPE di transizione per rendere valido il tuo codice HTML. Per impostare il colore di sfondo in HTML, utilizza codici speciali che puoi trovare in un editor grafico o utilizzando speciali servizi online. L'immagine di sfondo viene duplicata all'interno dell'area assegnata e si trova sopra il colore di sfondo. Per specificare un'immagine di sfondo, è meglio utilizzare il suo URL completo. Questo è tutto per me. Grazie per l'attenzione. Buona fortuna!
| alle 22:37 | Modifica messaggio |
Buona giornata a tutti coloro che vogliono imparare e imparare qualcosa di nuovo! Hai mai prestato attenzione all'aspetto, durante lo sviluppo del quale i creatori erano troppo pigri per decorare lo sfondo delle pagine? E mi sono girato. Questo sembra brutto. Spesso, a causa della mancanza di divisioni tra i diversi tipi di informazioni a cui siamo abituati, è confusa e semplicemente non c'è il desiderio di guardare oltre una tale risorsa web.
Affinché un tale disastro non mi accada, ho deciso di scrivere un articolo sull'argomento: "Come creare uno sfondo di pagina in html". Dopo aver letto la pubblicazione, imparerai quali strumenti puoi utilizzare per impostare il design dello sfondo, come correggere o modificare lo sfondo e molto altro che contribuirà a rendere attraente il tuo sito. E ora iniziamo!
Strumenti di base per impostare lo sfondo delle pagine web
Per impostare un'immagine di sfondo, i designer di lingua web hanno fornito l'attributo di sfondo. È disponibile sia in e css.
Nel linguaggio di markup, questo è un attributo del body tag e nei fogli di stile è una proprietà universale che consente di impostare fino a 5 caratteristiche di sfondo contemporaneamente. Lo sfondo è un elemento sufficientemente flessibile che può essere utilizzato per impostare lo sfondo sotto forma di un singolo colore, un'immagine a colori o persino un'animazione.
Quindi, per impostare l'immagine di sfondo tramite l'unità html
basta scrivere questo codice: ... e al posto delle parole "indirizzo file" inserisci il percorso dell'immagine.
Tuttavia, attenzione! Se vuoi vedere una tela a un colore come sfondo, specificata da un valore dalla tavolozza dei colori, questo viene fatto usando l'attributo bgcolor.
Ad esempio,
..., abbiamo impostato uno sfondo nero per il nostro sito.
I colori in css e html sono specificati da una parola inglese (ad esempio, rosso) o da un codice speciale costituito dal segno # e da sei caratteri dopo di esso (ad esempio, #FFDAB9).
Quando si digita la seconda opzione in prodotti software specializzati per sviluppatori, la tavolozza apparirà automaticamente davanti a te. Se hai appena iniziato a studiare queste lingue web, puoi sbirciare il codice colore su Internet.
Sfondo come proprietà nei fogli di stile sovrapposti
È impostato in un file separato con stili CSS o in un elemento
Primo testo
Secondo testo
Primo testo
Secondo testo
Su questa nota, possiamo riassumere il nostro lavoro. Unisciti alla schiera dei miei fedeli iscritti, fai domande se qualcosa non è chiaro, e non essere avido di un link al mio blog, ma condividilo con i tuoi amici. Ti auguro un piacevole apprendimento. Ciao ciao!
Cordiali saluti, Roman Chueshov
In html lo sfondo del sito non è impostato, è scritto attraverso stili css, ma questa è solo una formalità teorica. E ora scopriamo come definire questo sfondo.
Sfondo per un sito o un blocco separato
Poiché abbiamo bisogno di un file CSS per raggiungere questo obiettivo, dobbiamo crearlo e collegarlo a html. Questo è scritto. Dopodiché, puoi metterti al lavoro. Innanzitutto, devi decidere su cosa vuoi impostare lo sfondo. Se l'intera pagina nel suo insieme, puoi farlo in questo modo:
Corpo (colore di sfondo: bianco; )
Cioè, ci riferiamo al tag body, che rappresenta la nostra intera pagina. La proprietà background-color viene utilizzata per impostare il colore di sfondo. Ma cosa succede se si desidera impostare lo sfondo su un elemento grafico anziché su un colore solido? Allora dovresti scrivere così:
Body( background-image: url(path to image. image extension))
Per chiarezza, propongo di considerare tutto più in dettaglio con un esempio. Per questo userò la seguente immagine:
Ad esempio, background-image: url(comp.png) . In questo esempio, impostiamo un'immagine di sfondo chiamata comp (così l'ho chiamata) in formato png, che si trova nella stessa cartella del file css.
In html, creerò un blocco arbitrario con dimensioni specifiche per dimostrare il lavoro delle proprietà CSS su di esso.
Ed ecco gli stili per questo:
#ct( immagine di sfondo: url(comp.png); larghezza: 600px; altezza: 400px; )
Ecco cosa abbiamo:
Perché? Il fatto è che per impostazione predefinita, il browser ripete l'immagine così tante volte da riempire completamente il blocco. A volte questo è necessario, ad esempio, quando si utilizzano ornamenti senza cuciture, ma nel nostro caso dovrebbe esserci un'immagine. Fortunatamente, questo può essere gestito molto facilmente.
sfondo ripetuto
Se hai un'immagine come sfondo, per impostazione predefinita si ripeterà orizzontalmente e verticalmente per riempire l'intero spazio della pagina. Per rimuoverlo, viene utilizzata la proprietà background-repeat e il suo valore è no-repeat (non ripetere). Ci sono anche questi valori:
- Ripeti-x: ripeti solo in orizzontale
- Ripeti-y - solo verticale
Aggiungiamo alle proprietà del nostro sfondo grafico:
background-repeat: no-repeat;
Posizione
La proprietà background-position determina dove verrà posizionata l'immagine. Qui vengono impostati due valori: orizzontalmente e verticalmente. Esempi: posizione dello sfondo: in basso a destra - posizione nell'angolo in basso a destra, in alto a sinistra - in alto in basso (e così via per impostazione predefinita), 250px 500px - offset dall'angolo in alto a sinistra a destra di 250 pixel e in basso di 500.
Diamo un'occhiata meglio agli esempi:
posizione sullo sfondo: in alto a destra;
L'immagine si sposterà sul bordo in alto a destra. Ho anche dato al blocco uno sfondo giallo in modo da poterne vedere i bordi.
posizione di sfondo: 50% 50%;
L'immagine è apparsa esattamente al centro nel suo blocco. Sì, sì, questo è possibile anche grazie alla percentuale di record di posizione.
posizione di sfondo: 70% 20%;
Lo sfondo viene spostato del 70% in orizzontale e del 20% in verticale.
È inoltre consentito specificare un valore di posizione negativo in pixel. Questo può essere fatto, ad esempio, quando usi un'immagine sprite di grandi dimensioni e devi bloccare la parte desiderata di questo sprite.
Blocco dello sfondo
Mi piace molto anche una proprietà chiamata background-attachment . Ha solo due valori e il primo è quello predefinito (scorrimento). Ciò significa che quando scorri la pagina, scorrerà anche lo sfondo e, se usi un'immagine senza ripetizioni, alla fine finirà e continuerà solo un colore solido.
Per evitare che ciò accada, viene scritto background-attachment: fixed e ora il nostro background è fissato saldamente in posizione. Questo può essere paragonato a come definire una posizione fissa per un blocco e non scomparirà dalla pagina quando viene fatta scorrere.
Un resoconto ridotto di tutta questa bontà
Abbiamo analizzato molte proprietà che ti permettono di fare uno sfondo, ma se le applichi tutte, ottieni una notazione ingombrante. C'è una soluzione molto elegante. La proprietà background consente di annotare le impostazioni necessarie separate da uno spazio in questo ordine:
Sfondo: posizione di blocco della ripetizione dell'immagine a colori;
E ora tutto può essere scritto così:
Sfondo: URL giallo(comp.png) no-repeat 20% 100px;
Se una proprietà non ha bisogno di essere definita, viene semplicemente omessa (nel nostro caso, non abbiamo scritto background-allegato).
Un sacco di sfondi
Ma cosa succede se hai bisogno di più immagini di sfondo? Succede, cosa puoi fare. Oggi CSS supporta questa funzionalità. Proviamolo anche noi. Prendi questa icona
L'ho chiamato laptop.
Ed ecco il codice per incorporare il multifono:
Sfondo: url(comp.png) no-repeat 20% 100px, url(laptop.png) no-repeat 50% 50%; colore di sfondo: giallo
Come puoi vedere, tutto ciò che devi fare è inserire una virgola dopo la prima immagine e impostare le impostazioni per la seconda. Il colore solido in questo caso è meglio impostare separatamente.
Allo stesso modo, puoi registrare tutte le immagini che desideri, ma non esagerare: troppa grafica non è molto buona.
Qui è dove vorrei concludere questo articolo. Puoi fare molte altre cose interessanti con lo sfondo, proverò a scriverne in futuro (e ho già scritto qualcosa, ad esempio).
