Lloc d'implantació: com fer que la imatge de fons html

Molts dissenyadors de la tela del principiant, només per aprofundir en l'essència de la creació de llocs, sovint es pregunten imatge de fons html com fer-ho. I si alguns d'ells poden fer front a aquest problema, segueix sent un problema a l'hora d'estirar tot l'ample de la imatge en el monitor. Alhora, m'agradaria veure el lloc es mostren de manera idèntica en tots els navegadors, pel que ha de complir amb els requisits de cross-browser. Podeu configurar el fons de dues maneres: mitjançant l'ús de etiquetes HTML i estils CSS. Cada un per a si mateix triï la millor opció. Per descomptat, l'estil CSS és molt més convenient, a causa de que el seu codi s'emmagatzema en un arxiu separat i no ocupa altaveus addicionals en les etiquetes del lloc principal, però primer anem a considerar un mètode senzill per a la instal·lació de la imatge en el fons de la pàgina.

etiquetes HTML bàsiques per crear el fons

Per tant, anem a la qüestió de com fer que la imatge de fons en html a la pantalla. Per tal de semblar bonic lloc, vostè ha d'entendre un detall bastant important: és suficient amb fer un fons de gradient o pintar-lo de un color sòlid, però si cal inserir la imatge de fons, no va a estirar tot l'ample de la pantalla. La imatge va ser originalment necessari per recollir o fer el seu propi disseny amb aquesta extensió, en la qual es mostrarà la pàgina del lloc. Només quan la imatge de fons està a punt, arrossegar-lo a una carpeta anomenada «imatges». En ella, anem a emmagatzemar totes les imatges utilitzades, animacions i altres arxius gràfics. Aquesta carpeta ha d'estar ubicat en el directori arrel amb tots els seus arxius html. Ara pot seguir endavant i al codi. Hi ha diverses opcions per a l'escriptura de codi, de manera que el fons canviarà la imatge.

1. Escriu atribut d'etiqueta.
2. A través d'estils CSS en el codi HTML.
3. Escriu estils CSS en un arxiu separat.

Igual que en el codi HTML per fer que la imatge de fons, el que decideixi, però m'agradaria dir unes poques paraules sobre com seria el més òptim. El primer mètode és per escrit a través d'un atribut d'etiqueta ha estat durant molt de temps obsolet. La segona opció s'utilitza molt rarament, perquè resulta que una gran part del mateix codi. Una tercera opció és la més comuna i eficaç. Aquests són exemples d'etiquetes HTML:

1. El primer mètode de gravació a través atribut d'etiqueta (cos) a l'arxiu index.htm. S'emmagatzema en aquesta forma: (fons cos = "folder_name / Nazvanie_kartinki.rasshirenie") (/ cos). És a dir, si tenim una foto amb el títol «imatge» i l'extensió JPG, i la carpeta hem anomenat «imatges», llavors l'entrada de codi HTML es veurà així: (fons cos = "images / Picture.jpg") ... (/ cos) .
2. El segon mètode consisteix en l'enregistrament d'un estil CSS, però està escrit en el mateix arxiu amb el nom index.htm. (Body style = "background: url ( '../ Images / Picture.jpg')").
3. El tercer mètode de gravació es realitza en dos arxius. El document amb l'etiqueta de nom index.htm (cap) s'escriu una línia com: (cap) (enllaç rel = "stylesheet" type = "text / css" href = "http: // lloc / article / 193.110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ cap). Un estil style.css arxiu anomenat ia escriure: body {background: url (Imatges / Picture.jpg ')}.

Igual que en el codi HTML per fer que la imatge de fons, ho entenem. Ara ha de trobar la manera d'estirar la imatge a l'ample de tota la pantalla.

Maneres d'estirar la imatge de fons a l'amplada de la finestra

Nosaltres representem a la nostra pantalla en forma de percentatge. Resulta que tota l'amplada i longitud de la pantalla 100% x 100%. Hem de estirar la imatge d'aquesta amplada. Afegir a la línia style.css gravació d'arxiu d'imatge que va a estirar la imatge en tota l'amplada i la longitud del monitor. Com està escrit en estil CSS? És molt senzill!

cos

{

background: url (Imatges / Picture.jpg ')

fons-size: 100%; / * Aquest article és adequat per a la majoria dels navegadors moderns * /

}

Així que ens vam adonar de com fer una imatge de fons en html a la pantalla. També hi ha un mètode de registrar a l'arxiu index.htm. Encara que aquest mètode i antiquat, però per a novells és necessari conèixer i comprendre. L'etiqueta (cap) (estil) div {background-size: coberta; } (/ Style) (/ cap), aquest registre vol dir que assignem una unitat especial per al fons, que es col·loca sobre tota l'amplada de la finestra. Hem considerat dues maneres, com fer un lloc html imatge de fons, de manera que la imatge s'estén a tot l'ample de la pantalla en qualsevol dels navegadors moderns.

Com fer un fons fix

Si decideix utilitzar una imatge com a fons de la futura recurs a la web, a continuació, només ha de saber com fer que ho arreglin, de manera que no s'estira en longitud i no fer malbé l'aparença estètica. Simplement mitjançant l'ús de codi HTML per registrar una petita addició. Necessita presentar style.css per afegir una frase després de fons: url (Imatges / Picture.jpg ') fix; o en comptes afegit després de la coma línia separada - posició: fix. Per tant, el fons de pantalla es fixarà. Durant el desplaçament del contingut en el lloc, es veurà que el text línies s'estan movent, però el fons roman en el seu lloc. Pel que ha après com fer imatge de fons html, de diverses maneres.

Treballar amb taules en HTML

Molts desenvolupadors web sense experiència, enfront de les taules i blocs, sovint no entenen com fer la taula d'imatge html fons. Igual que tots els equips HTML estils i CSS, el llenguatge de programació web és bastant simple. I la solució a aquest problema és escriure un parell de línies de codi. Vostè ja ha de saber que l'escriptura d'una taula de files i columnes, respectivament, com dictamina les etiquetes (TR) i (TD). Per fer que el fons de la taula en forma d'una imatge, cal afegir a l'etiqueta (taula), (tr) o (td) una simple frase en referència a la imatge de referència: Fons = URL imatges. Per a més claredat, donem un parell d'exemples.

Taula amb una imatge en lloc del fons: exemples HTML

Dibuixar una taula de 2x3 i fer que la imatge de fons emmagatzemada en les "imatges" carpeta: (fons de la taula = "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) (/ table). Així que la nostra taula es dibuixa en el fons de la imatge.

Ara dibuixa els mateixos mides de plaques de 2x3, però inserir una imatge en les columnes numerades 1, 4, 5 i 6. (taula) (TR) (fons td = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (fons td = "Images / Picture.jpg") abril (/ td) (fons td = "Imatges / Picture.jpg") 5 ( / td) (fons td = "images / picture.jpg") juny (/ tD) (/ TR) (/ taula). Després de veure que podem veure que el fons apareix només en aquelles cèl·lules en les que hem registrat, i no tota la taula.

lloc de la compatibilitat entre navegadors

Hi ha una cosa com ara un recurs de la compatibilitat entre navegadors web. Això vol dir que el seu lloc està igualment ben representada en diferents tipus i versions de navegadors. Ha de ser de codi HTML i CSS d'estils per a personalitzar un navegadors necessaris. D'altra banda, en l'era moderna dels telèfons intel·ligents, molts desenvolupadors web estan tractant de crear llocs i adaptats per a la versió mòbil i una aparença d'equip.