Molti nuovo layout, basta arrivare al cuore della creazione di siti, spesso si chiedono come in html per rendere l'immagine di sfondo.E se alcuni di essi possono affrontare questo problema, si hanno ancora problemi durante il tratto l'intera larghezza dell'immagine sul monitor.Allo stesso tempo, mi piacerebbe vedere il sito vengono visualizzati su tutti i browser, quindi deve rispettare i requisiti krossbrauzernosti.È possibile impostare uno sfondo in due modi: utilizzando i tag HTML e gli stili CSS.Ciascuno per se stesso seleziona l'opzione migliore.Naturalmente, stile CSS è molto più conveniente, perché il codice è memorizzato in un file separato e non occupa altoparlanti supplementari principali tag del sito, ma si consideri dapprima un semplice metodo di impostazione dell'immagine di sfondo sul sito.
tag HTML di base per creare lo sfondo
Quindi, andare alla domanda di come fare un'immagine di sfondo html sullo schermo.Al fine di esaminare bellissimo sito, è necessario capire un dettaglio piuttosto importante: è sufficiente solo per fare un gradiente di sfondo o un colore solido per dipingere, ma se si vuole inserire l'immagine in secondo piano, non tenderai l'intera larghezza del monitor.L'immagine era originariamente necessario raccogliere o creare il proprio design con questa estensione, in cui potrete visualizzare la pagina.Solo quando l'immagine di sfondo è pronto, spostarlo in una cartella chiamata «Immagini».In esso, si memorizzare tutte le immagini utilizzate, animazioni e altri file di immagine.Questa cartella deve essere nella directory radice del file con tutto il vostro html.Ora si può passare al codice.Ci sono diverse opzioni per il codice di registrazione con il quale il modello cambia immagine.
- etichetta dell'attributo Write.
- via di stile CSS nel codice HTML.
- stile Scrivere CSS in un file separato.
Come in HTML per rendere l'immagine di sfondo, per voi decidere, ma vorrei dire alcune parole su come sarebbe stato il più ottimale.Il primo metodo è quello di scrivere attraverso un tag è stato a lungo obsoleto.La seconda opzione è usata molto raramente, perché si scopre che un sacco dello stesso codice.Una terza opzione è la più comune ed efficace.Ecco gli esempi di tag HTML:
- primo metodo di registrazione attraverso un tag (corpo) nel file index.htm.E 'scritto in questa forma: (body background = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ corpo).Cioè, se abbiamo una foto con il nome di «immagine» e l'estensione JPG, e la cartella che abbiamo chiamato «Immagini», poi il record di codice HTML sarebbe simile a questa: (body background = "images / Picture.jpg") ... (/ corpo).Secondo metodo
- comporta la registrazione stile CSS, ma è scritto nello stesso file con il nome index.htm.(corpo style = "background: url ('Immagini ../ / Picture.jpg')").
- E il terzo metodo di registrazione è fatto in due file.Il documento con il tag nome index.htm (testa) è scritto una tale linea: (testa) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ testa).Un file di stile denominato style.css già scrivere: body {background: url (Immagini / Picture.jpg ')}.
Come in HTML per rendere l'immagine di sfondo, abbiamo discusso.Ora è necessario capire come allungare l'immagine per tutta la larghezza dello schermo intero.Metodi
di stretching della carta da parati della larghezza della finestra
immaginare il nostro schermo in forma percentuale.Si scopre che l'intera lunghezza e larghezza dello schermo saranno 100% x 100%.Dobbiamo estendere l'immagine di tale larghezza.Aggiungere a registrare le immagini nella linea di file style.css che si estendono l'immagine per l'intera larghezza e la lunghezza del monitor.Come è scritto nel tuo stile CSS?E 'semplice!Corpo
{
sfondo: url (Immagini / Picture.jpg ')
background-size: 100%;/ * Questo post è adatto alla maggior parte dei browser moderni * /
}
Così abbiamo capito come fare il immagine di sfondo in html sullo schermo.Vi è un metodo di registrazione nel file index.htm.Anche se questo metodo e antiquato, ma per i principianti, è necessario conoscere e comprendere.Il tag (testa) (stile) div {background-size: copertura;} (/ Stile) (/ testa), significa che questo disco allochiamo un'unità speciale per lo sfondo, che verrà posizionato su tutta la larghezza della finestra.Abbiamo considerato due modi per rendere il sito immagine di sfondo HTML, immagine è allungata per tutta la larghezza dello schermo in uno qualsiasi dei browser moderni.
Come fare uno sfondo fisso
Se si decide di utilizzare l'immagine come sfondo il futuro della risorsa web, allora avete solo bisogno di sapere come fare fisso, in modo che non si allunga in lunghezza e non ha rovinato l'aspetto estetico.Semplicemente utilizzando il codice HTML per registrare una piccola aggiunta.È necessario style.css file per aggiungere una frase dopo background: url (Immagini / Picture.jpg ') fissa;o invece aggiunti dopo il punto e virgola riga separata - position: fixed.Così, lo sfondo sarà fissata.Durante lo scorrimento di un sito di contenuti, vedrai che le righe di testo si muovono, ma lo sfondo rimane al suo posto.Quindi, si è appreso come HTML per rendere l'immagine di sfondo, in diversi modi.
lavorare con le tabelle in HTML
Molti sviluppatori web inesperti, di fronte a tavoli e spesso non capisco come in html per rendere l'immagine sfondo della tabella.Come tutti gli stili squadre HTML e CSS, il linguaggio di programmazione web è molto semplice.E la soluzione a questo problema è quello di scrivere un paio di linee di codice.Si dovrebbe già sapere che scrivere una tabella di righe e colonne, rispettivamente, come indicato dai tag (tr) e (TD).Per rendere lo sfondo della tabella sotto forma di immagini, è necessario aggiungere al tag (tabella), (tr) o (td) una semplice frase con riferimento all'immagine: background = URL dell'immagine.Per chiarezza, diamo un paio di esempi.Tavoli
con l'immagine di sfondo invece: esempi HTML
disegnare una tabella 2x3 e rendono l'immagine di sfondo memorizzate nella cartella "Immagini": (tabella di fondo = "images / Picture.jpg") (tr) (td)1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabella).Quindi il nostro tavolo sarà disegnata sullo sfondo del quadro.
Ora disegnare la stessa piastra di dimensioni 2x3, ma inserire un'immagine in un numero di colonna 1, 4, 5 e 6 (tabella) (tr) (td background = "images / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "images / Picture.jpg") 4 (/ td) (td background = "images / Picture.jpg") 5 (/ td) (td background =" images / Picture.jpg ") 6 (/ TD) (/ TR) (/ tabella).Dopo aver visto può vedere che lo sfondo appare solo in quelle cellule, in cui abbiamo registrato, ma non l'intero tavolo.
sito Cross-Browser
C'è una cosa come cross-browser risorsa compatibilità web.Ciò significa che le pagine del sito saranno ugualmente bene visualizzate in diversi tipi e versioni di browser.Dovrebbe essere di codice HTML e CSS per personalizzare lo stile richiesto dal browser.Inoltre, in epoca moderna di smart phone, molti sviluppatori web stanno cercando di creare siti che si adattano e una versione mobile di un computer e aspetto.
