Come creare uno sfondo di immagini in HTML e CSS. 3 modi semplici

Imposta il colore del piano posteriore fuori dalla tavolozza. Il colore dell
Saluti. In questo articolo, voglio raccontare circa tre modi per posizionare un'immagine come sfondo dell'intera pagina utilizzando solo HTML + CSS (senza utilizzare JS).

Saluti. In questo articolo, voglio raccontare circa tre modi per posizionare un'immagine come sfondo dell'intera pagina utilizzando solo HTML + CSS (senza utilizzare JS).

Quindi, i requisiti per l'immagine di sfondo siamo come segue:

  • 100% di larghezza e pagine altezza coperta
  • Le scale di sfondo se necessario (lo sfondo viene allungato o compresso a seconda della dimensione dello schermo)
  • Incolla le proporzioni delle immagini (Aspect Ratio)
  • Immagine centrata sulla pagina
  • Lo sfondo non causa pergamene
  • La soluzione è massimalmente crossbrawser
  • Non vengono utilizzate altre tecnologie tranne CSS

Imposta il colore del piano posteriore fuori dalla tavolozza. Il colore dell'heir coincide sempre con il colore dell'elemento antenato.

Metodo 1.

A mio parere, questo è il modo migliore, perché è il più semplice, conciso e moderno. Usa la proprietà CSS3 Formato di sfondo. che applichiamo al tag Html. . Esattamente Html. , ma no Corpo. perché La sua altezza è maggiore o uguale all'altezza della finestra del browser.

Installare uno sfondo fisso e centrato, quindi regola le dimensioni usando Sfondo-Dimensione: copertina .

Html { 

Immagine di sfondo: URL (immagini / sfondo.jpg);

Sfondo-ripetizione: no-ripetizione;

Sfondo-Position: Center Center;

Attacco di sfondo: fisso;

-Webkit-Sfondo-Dimensione: copertura;

-Moz-Sfondo-Dimensioni: copertina;

-O-formato-dimensione: copertura;

Dimensioni di sfondo: copertina; 
} 

Demo

Questo metodo funziona in

  • Chrome (qualsiasi versione)
  • Opera 10+.

Firefox 3.6+.

Safari 3+.

Cioè 9+.

Affinché le immagini possano caricare rapidamente, posizionare i tuoi siti solo dai fornitori di hosting comprovati, ad esempio BEGEGE.COM 
Utenti e motori di ricerca amano i siti rapidi. 

Immagine di sfondo: URL (immagini / sfondo.jpg);

Metodo 2.

Questo metodo prevede l'uso dell'elemento IMG, le cui dimensioni variano a seconda delle dimensioni della finestra del browser. Per allungare l'immagine a schermo intero, ha bisogno di impostare l'altezza minima e la larghezza con un valore del 100%. E in modo che l'immagine non sia compressa alla dimensione più piccola rispetto all'originale, installare Min-Larghezza con il valore della larghezza uguale dell'immagine.

Se la larghezza della finestra è inferiore alla larghezza dell'immagine, verrà utilizzata la query del supporto per allineare lo sfondo al centro.

ereditare.

<img src = "/ immagini / background.jpg" class = "sfondo" />

img.background { Altezza minima: 100%; Min-Larghezza: 640PX; Larghezza: 100%; Altezza: Auto;

Posizione: fissa; Top: 0; a sinistra: 0;

/ * Dipende dalla dimensione dell'immagine * /

@Media schermo e (larghezza massima: 640px) { img.bg { и A sinistra: 50%; margin-sinistra: -320px; } } } Demo

Eredita tutte le caratteristiche dell'elemento genitore

Questo metodo funziona in:

Tutte le versioni di buoni browser (Chrome, Opera, Firefox, Safari) Cioè 9+. и Metodo 3. . Un altro modo è il seguente: Fissare l'immagine <img /> all'angolo in alto a sinistra della pagina e allungarlo utilizzando le proprietà di larghezza min-larghezza e min-altezza del 100%, pur mantenendo il rapporto aspetto. Vero, con questo approccio, l'immagine non è centrata. Ma questo problema è risolto da aver avvolto l'immagine in <DIV />, che facciamo 2 volte la dimensione della finestra. E l'immagine stessa che allunghiamo e mettiamo al centro. <div class = "sfondo"> <img src = "/ Immagini / background.jpg" />

</ div> Div.background { <div class = "sfondo"> Posizione: fissa;

TOP: -50%;

A sinistra: -50%; } Larghezza: 200%; Altezza: 200%; }

img { Posizione: assoluto; Top: 0;

a sinistra: 0; Destra: 0; :

Fondo: 0;

Margine: Auto; Min-Larghezza: 50%; Altezza minima: 50%; } .

Questo metodo funziona in buoni browser e cioè 8+.

Spero che queste informazioni siano utili per te. Personalmente, spesso uso questi metodi, soprattutto prima. Sicuramente ci sono altri modi per mettere un'immagine sullo sfondo posteriore con CSS. Se lo sai, condividi, per favore commenta. Imposta il colore di sfondo e / o un'immagine per una pagina o un oggetto separato è abbastanza semplice. La cosa principale è sapere dove e come può essere fatto, oltre a avere un codice colore e / o un'immagine di sfondo. È possibile che da questo articolo imparerai molte cose nuove, ma l'ho creata specificamente per i principianti. Pertanto, tutto sarà il più breve possibile e in dettaglio simultaneamente. La cosa principale è che riceverai non solo la presentazione generale e gli esempi pronti, ma anche la comprensione di come creare uno sfondo in HTML. Per impostare lo sfondo in HTML usa il DOCTYPE intermedio E inizierò con il fatto che HTML5. Non c'è possibilità di impostare lo sfondo per il sito. Questa funzione è stata decisa di sopportare in CSS. Pertanto, se prevedi di usare di seguito, e vuoi ottenere un valido » (corretta) Codice, è necessario rimanere al tipo di transizione del documento. Per fare ciò, la tua pagina Web dovrebbe iniziare con la seguente riga: <! DOCTYPE HTML PUBBLICA "- // W3C // DTD HTML 4.01 » Transitorio // en "" http://www.w3.org/tr/html4/loose.dtd ">

Tempo per lezioni pratiche

Come è lo sfondo su una pagina web? (#)Se hai capito, arriviamo a capire come viene creato lo sfondo. E la prima cosa qui dovrebbe essere notata - questa è la differenza tra

Colore di sfondo

Immagine di sfondo

. All'inizio va

Colore di sfondo A sinistra: 50%; che inonda tutti lo spazio della pagina disponibile o il suo elemento. Il ripetuto sopra Immagine di sfondo }

. Visivamente, questo può essere rappresentato come segue: Posizione: assoluto; Top: 0;

Sfondo del documento HTML e dei suoi elementi

Dopo aver deludente gli elementi principali del controllo del contesto, nonché i loro attributi, procedere direttamente all'analisi di un esempio specifico. Nel codice del programma mostrato di seguito, ho provato a abilitare tutti gli elementi descritti.

La seconda cosa che devi sapere è la differenza tra

corpo del documento Destra: 0; :

Elemento del documento

Corpo del documento

Indicato nel codice HTML del tag della pagina Web

Corpo. che include tutto il contenuto della pagina web. Ovviamente, lo sfondo del documento del documento non può essere trasparente. Se lo sfondo del corpo del documento non è specificato, viene utilizzato il valore predefinito specificato nelle impostazioni del browser. Elementi della pagina sono all'interno del tag }

. È interessante notare che è possibile impostare il colore e / o l'immagine di sfondo utilizzando HTML su tutti gli elementi del documento. Ad esempio, l'immagine di sfondo può essere specificata solo per le tabelle. Per impostazione predefinita, di solito hanno uno sfondo trasparente. Posizione: assoluto; Top: 0;

Attributo BGColor per creare colore di sfondo

Per chiedere

Il documento o i suoi elementi sono attributi Altezza: 200%; и Immagine di sfondo BGCOLOR. , per esempio: <Body BGColor = "# EC008C">

<! - Body Document ->

</ Body>

In questo caso, abbiamo impostato il colore di sfondo per la pagina nel suo complesso. Ma un esempio di come impostare il colore di sfondo per il tavolo, nel tag tavolo <Tabella BGColor = "# EC008C"> <TR> <TD> Testo con sfondo </ td> </ tr> </ tabella>

È interessante notare che anche il colore di sfondo nella tabella può essere specificato anche per le righe nel tag

Tr. E per le loro cellule nel tag Td.

Come scoprire il codice colore? Probabilmente hai già notato che il colore in HTML è impostato su speciale codice Html. , per esempio:

# EC008C.

  • . Per scoprire il codice è necessario utilizzare il colore è possibile utilizzare uno degli editor di grafica. Ad esempio, in Photoshop puoi usare "
  • Strumento contagocce.
  • (Pipetta)

Per ottenere un colore da un punto nella foto. Quindi, è necessario fare clic sul colore risultante sulla barra degli strumenti e nella finestra a cui si apre "

Color Picker (Selezione del colore) Copia codice colore. Attiro la tua attenzione sul fatto che questo codice sarà senza un segno di reticolo All'inizio, questo segno dovrà essere aggiunto manualmente.

Puoi anche utilizzare numerosi servizi online, ad esempio: 
Il loro principio di lavoro è ancora più semplice: fai clic sul colore desiderato e prendi il codice. Attributo Sfondo per creare un'immagine di sfondo Così come nel caso del colore di sfondo e nel caso di
È necessario utilizzare un attributo speciale, vale a dire 
sfondo. 
<body background = "/ 2014/06 / bg.jpg">

В Html. In questo caso, chiediamo l'immagine in background per la pagina nel suo complesso. È degno di nota che a causa dei limiti delle dimensioni dell'immagine, verrà ripetuto, ad esempio: Come vedi, quando la ripetizione, la transizione tra le immagini è evidente. Pertanto, vengono spesso utilizzate immagini speciali, dove viene preso in considerazione questo momento. Ma un esempio di come impostare un'immagine di sfondo per una tabella, in tag

<tabella background = "/ 2014/06 / bg.jpg"> <tr> <td> Testo con sfondo </ td> </ tr> </ tabella> Html. È interessante notare che l'immagine di sfondo può essere impostata solo per la tabella nel suo insieme e / o sulla sua cella separata. Per una corda non funzionerà. Attributo Sfondo per creare un'immagine di sfondo .

Percorso assoluto e relativo per l'immagine di sfondo (Selezione del colore) Vale la pena di prestare attenzione Indirizzo Immagine di sfondo. . In questo caso, viene utilizzato il percorso relativo per l'immagine, cioè. L'indirizzo è indicato nella posizione del file immagine nel file della pagina Web. Questa opzione non può essere chiamata particolarmente riuscita. È meglio usare il percorso assoluto per l'immagine, cioè.

il suo URL completo <body background = "/ immagini / bg.jpg"> .

In questo caso, non avrai problemi concomitanti. Per ulteriori informazioni su di esso puoi leggere qui.

Riassumere. 
Usando attributi Moralmente obsoleto, perché per la validità del codice HTML dovrai utilizzare il Transitional DOCTYPE.

. Per impostare il colore di sfondo in HTML, utilizza codici speciali che è possibile scoprire in un editor grafico o utilizzando speciali servizi online. L'immagine di sfondo è duplicata nella coda dell'area assegnata e si trova sulla parte superiore del colore di sfondo. Per specificare un'immagine di sfondo, è meglio usare il suo URL completo. Ho tutto su questo. Grazie per l'attenzione. In bocca al lupo!

Breve link: http://goo.gl/03tsnz Come fare uno sfondo per il sito? Qualsiasi stanza sembrerà molto meglio se il suo pavimento sorge caro tappeto persiano. Quindi peggio il tuo sito? Forse è tempo e il suo piano " impostato
  • »Costoso elegante palazzo fatto a mano. Comprenderemo di più su come fare uno sfondo per il sito:
  • Succede che il vecchio design del sito sia già arrivato. E voglio qualcosa di nuovo e gustoso. E il nuovo design sarà tale se lo cucini con le tue mani.
  • Ma per cambiare completamente tutto il design della risorsa te stesso - la cosa è ingrata. Sì, e non tutti hanno una cosa su questo. "
  • affilato

" mani. Pertanto, è più facile rinfrescare il vecchio modello, cambiando il colore dello sfondo della risorsa o della sua immagine di sfondo.

Ci sono diversi modi per cambiare lo sfondo sul sito. Questo usa opportunità. 
CSS. o . Ma molte delle proprietà per lavorare con lo sfondo hanno lo stesso nome e metodologia di applicazione in queste tecnologie web.
  • Come sfondo, puoi usare più elementi: Colore; ;
  • Immagine di sfondo;
  • Immagine strutturale. Ci occuperemo dell'uso di ciascuno di loro in modo più dettagliato. Per impostare il colore dello sfondo posteriore per il sito, viene utilizzata la proprietà.

colore di sfondo.

Attributo di stile. 

Stile. . Cioè, per impostare il colore di base per la pagina Web, è necessario registrarlo all'interno del tag <body>. Per esempio: <Body Style = "Sfondo-Color: # 55d52b"> <P> Sfondo del sito # 55D52B </ P> </ Body>

Oltre al codice colore esadecimale, il valore è supportato nel formato di parole chiave o

RGB. 

. Esempi:

<Body Style = "Sfondo-Color: RGB (51,255,153)"> <P> Sfondo del sito Web RGB (23,113,44) </ P> </ Body> <Body Style = "Sfondo-Color: Verde"> <P> Sfondo del sito Web verde </ P> </ Body> Impostazione del colore di sfondo utilizzando le parole chiave ha un numero di restrizioni rispetto ai restanti due modi.

Totale 16 parole chiave sono supportate per l'impostazione del colore. Ecco qui alcuni di loro:

Bianco, Rosso, Blu, Nero, Giallo altro. Pertanto, per impostare lo sfondo per il sito

È meglio usare il formato esadecimale o 

Oltre a selezionare il colore, sono disponibili altre impostazioni. Se proprietà. Valore impostato Trasparente

Lo sfondo della pagina diventerà trasparente. Questo valore è assegnato a questa proprietà per impostazione predefinita. Ora considera la possibilità di una lingua ipertestuale per installare il modello di sfondo per il sito. È possibile farlo usare la proprietà. immagine di sfondo.

Esempio: 

<Body style = "sfondo - Immagine: URL (IMG_1809.jpg)"> </ Body>

Come si può vedere dal codice, il rilegatura dell'immagine avviene attraverso il percorso

URL

Pubblicato tra parentesi. Ma non tutte le immagini risultano essere così grandi per riempire l'intera area dello schermo con le loro taglie. Vediamo come verrà visualizzata la figura più piccola.

Supponiamo che stiamo sviluppando un sito sulla poesia e come substrato è necessario utilizzare l'immagine di Pegasus. Il cavallo alato personificherà la libertà di pensiero creativo del poeta!

Abbiamo bisogno che l'immagine viene visualizzata nel mezzo dello schermo una volta. Ma sfortunatamente, il browser non capisce i nostri desideri sublimi. E visualizza un'immagine più piccola per lo sfondo del sito tutte le volte dell'area dello schermo può ospitare:

Probabilmente quattro cavalli sorridenti con ali dei poeti saranno troppo per l'ispirazione. Pertanto, vietare la clonazione del nostro Pegasus. Farlo usando la proprietà

sfondo-ripetizione. . Valori possibili: ripetizione-x - ripetizione dell'immagine di sfondo orizzontalmente;

Quindi, facilitiamo il compito di impostare lo sfondo posteriore da due immagini: animazione e immagine regolare. In questo caso, l'animazione GIF verrà fissata e il disegno è scrollato insieme al contenuto della pagina.

Ripeti-y - verticalmente;

Ripeti - su entrambi gli assi;

No-ripetizione - La ripetizione è proibita.

Tra le opzioni elencate siamo interessati all'ultimo. Prima di cambiare lo sfondo del sito, lo usiamo nel tuo codice:

<Body style = "background-Image: URL (3.jpg); sfondo-ripetizione: no-ripetizione"> </ corpo>

Ma, naturalmente, è meglio se il nostro Letow si trova nel mezzo dello schermo. Proprietà

Posizioni di sfondo Solo è destinato a posizionare il modello di sfondo sulla pagina. Imposta le coordinate della posizione in diversi modi:
. Cioè, per impostare il colore di base per la pagina Web, è necessario registrarlo all'interno del tag <body>. Per esempio: Parola chiave (
<body background = "/ immagini / bg.jpg"> Top, fondo, centro, a sinistra, a destra)
o Percentuali: il conto alla rovescia inizia dall'angolo in alto a sinistra;
Qualsiasi stanza sembrerà molto meglio se il suo pavimento sorge caro tappeto persiano. Quindi peggio il tuo sito? Forse è tempo e il suo piano " In unità di misura (
(Selezione del colore) Pixels.
). Usiamo l'opzione più semplice per il centraggio:

<Body style = "background-Image: URL (3.jpg); sfondo-ripetizione: No-ripetizione; Sfondo-Posizione: Top Center"> </ Body>

Succede che è necessario fissare la posizione del disegno durante lo scorrimento. Pertanto, prima di fare una foto del sito, utilizzare una proprietà speciale.

attacco di sfondo.

. Valori validi: <ul> <li> rotolo; </ li> <li> fisso. </ Li> </ ul>

Abbiamo bisogno dell'ultimo significato. Ora il codice del nostro esempio sarà simile a questo: [/ HTML] 
<body style = "background-Image: URL (3.jpg); sfondo-ripetizione: No-ripetizione: No-ripetizione; Sfondo-Posizione: Top Center; Sfondo-Attacco: fisso"> </ Body> 

Nel primo esempio, per lo sfondo, abbiamo usato un grande e bellissimo paesaggio del deserto. Ma per tale bellezza devi pagare pieno. Il peso dell'immagine eseguita in alta qualità può raggiungere diversi megabyte.

Questo volume non influisce sulla velocità di download della pagina del browser con connessione ad alta velocità con Internet. Ma che dire di Internet mobile, quando si utilizza il download di diversi "

metri

"Ci vorrà molto tempo?

"Ci vorrà molto tempo? Tutti questi problemi sono risolti utilizzando uno sfondo di texture. Usa una piccola immagine come modello di texture. Anche sotto la condizione della sua ripetizione multipla, il modello è caricato solo una volta.

Per creare uno sfondo scuro per il sito Vai a Corpo. Photoshop. Corpo. , Creare un'immagine sotto forma di una striscia di un lungo 1200 pixel e una larghezza di 15 pixel. Quindi usiamo una semplice sfumatura in bianco e nero e colleghiamo la consistenza risultante alla pagina del sito:

<Body style = "sfondo - Immagine: URL (1.png); Colore: RGB (0,51,204)"> </ Body>

Per chiarezza, abbiamo aggiunto il testo e ne abbiamo dato un colore usando la proprietà. Corpo. Colore Corpo. . Questo è quello che è successo:

  • Altezza: 200%; Tutte le proprietà sopra descritte sono applicabili anche per fogli di stile a cascata. Creare uno sfondo del sito
  • Immagine di sfondo CSS.
  • Riscrittendo il codice di uno dei nostri esempi precedenti: <Head> <Titolo> Documento senza titolo </ Titolo> <Style Type = "Text / CSS"> Body {background-Image: URL (3.jpg); sfondo-ripetizione: No-ripetizione; Sfondo-Posizione: Top Center; Sfondo-Attacco: fisso;} </ Style> </ Head> <Body> </ Body>
  • Il risultato sarà simile. Bene, abbiamo guardato tutte le opzioni, come cambiare lo sfondo sul sito. Ora rimane solo per creare un disegno del tappeto futuro e diffonderlo sulle pagine della tua risorsa. Ma questa è la tua mano.
  • Buona giornata a tutti per imparare e imparare qualcosa di nuovo! Hai mai prestato attenzione alla comparsa dei siti quando si sviluppa i creatori sono stati pigri per organizzare lo sfondo delle pagine? E ho girato. Sembra massacro. Spesso, a causa della mancanza di normali separazioni tra diversi tipi di informazioni, è mescolato e semplicemente scompare il desiderio di guardare ulteriormente una tale risorsa web. In modo che tale problema sia accaduto al tuo progetto, ho deciso di scrivere un articolo sull'argomento: "Come fare uno sfondo di pagine in HTML." Dopo aver letto la pubblicazione, imparerai, con quali strumenti è possibile impostare il design di sfondo, come creare uno sfondo fisso o cambiando e molto altro, che aiuterà a rendere attraente il tuo sito web. Ora iniziamo!
  • Strumenti di base per l'impostazione delle pagine Web di sfondo Per impostare l'immagine di sfondo, gli sviluppatori di lingue Web hanno fornito uno sfondo di attributi. È disponibile sia in HTML che in CSS.
  • Nel linguaggio di markup, questo è un attributo del tag del corpo e nelle tabelle di stile - una proprietà universale che consente di impostare fino a 5 caratteristiche del piano posteriore allo stesso tempo. Lo sfondo è un elemento abbastanza flessibile che può essere utilizzato per comportare lo sfondo come colore, immagine a colori o addirittura animazione. Quindi, per installare l'immagine di sfondo attraverso l'unità HTML <Body> è sufficiente scrivere tale codice:
  • <Body background = "indirizzo file"> ... </ body> E invece delle parole "indirizzo file" inserire il percorso verso l'immagine.
  • Tuttavia, nota! Se sotto forma di sfondo si desidera visualizzare una tela monochona specificata dalla tavolozza dei colori, quindi viene eseguita utilizzando l'attributo BGColor. Ad esempio, <Body BGColor = "# 000000"> ... </ Body>, abbiamo chiesto uno sfondo nero per il nostro sito.
  • I colori in CSS e HTML sono impostati da una parola inglese (ad esempio, rosso) o da un codice speciale che consiste in un segno # e sei caratteri dopo (ad esempio # ffDab9). Quando si digita una seconda opzione in prodotti software specializzati per gli sviluppatori, la tavolozza appare automaticamente di fronte a te. Se hai appena iniziato a imparare queste lingue web, allora il codice colore può essere spacciato su Internet.

Sfondo come proprietà in tavoli stile cascata Altezza: 200%; :

È impostato o in un file separato con gli stili CSS o nell'elemento <Style>. Con questa proprietà, è possibile installare modelli di sfondo o colore, specificare la posizione iniziale sulla pagina, impostare le immagini ricorrenti e fisse. Per una maggiore chiarezza, ho fatto definizioni nella tabella. 

Parametri Scopo

Utilizzato per installare un'immagine fissa o scorretta insieme al contenuto del sito. Succede fisso, scorrere e ereditare

Imposta l'immagine di sfondo. Può essere indicato simultaneamente con il colore. Quindi quest'ultimo verrà visualizzato fino a quando l'immagine è completamente caricata.

Imposta la posizione iniziale dell'oggetto per il parametro precedente. Indica orizzontalmente a destra, sinistra e centrale e verticalmente - in basso, superiore e centrale. Inoltre, è possibile ereditare la posizione (eredita), impostare in percentuale, pixel e altre dimensioni 

Applicare quando si utilizza l'attributo di sfondo-image. Regola come si ripeterà l'immagine. È possibile specificare 2 valori: per orizzontale e verticale. Ci sono caratteristiche: no-ripetizione, ripetizione, ripetizione-x, ripetizione-y, eredita, spazio

Добавить комментарий