Pesintä sivusto: Miten HTML tehdä taustakuvan

click fraud protection

Monet uuden ulkoasun, vain saada sydämeen luoda sivustoja, usein miettinyt miten html tehdä taustakuvan.Ja jos jotkut niistä voivat käsitellä tätä ongelmaa, sinulla on vielä ongelmia venyttää koko leveys kuvan monitorissa.Samalla haluaisin nähdä sivuston näkyvät kaikissa selaimissa, joten sen on noudatettava krossbrauzernosti.Voit asettaa taustan kahdella tavalla: käyttämällä HTML tageja ja CSS-tyylejä.Jokainen itse valitsee paras vaihtoehto.Tietenkin, CSS tyyli on paljon helpompaa, koska koodi on tallennettu erilliseen tiedostoon ja ei vie ylimääräistä kaiuttimet pääsivuston tunnisteet, mutta ensin harkittava yksinkertainen määrittämismenetelmistä taustakuvan päällä.

HTML tageja luoda tausta

Joten, mene kysymykseen, miten tehdä taustakuvan html ruudulla.Jotta kaunis sivuston, sinun täytyy ymmärtää melko tärkeä yksityiskohta: se riittää vain tehdä kaltevuus tausta tai yksivärinen maalata sitä, mutta jos haluat lisätä kuvan taustan, se ei veny koko leveyden näytön.Kuva oli alun perin tarpeen poimia tai tehdä oman suunnittelun tämän laajennuksen, jossa voit näyttää sivun.Vasta kun taustakuvan on valmis, siirrä se kansioon nimeltä "Kuvat».Siinä me tallentaa kaikki käytetyt kuvat, animaatioita ja muita kuvatiedostoja.Tämä kansio pitäisi olla juurihakemistossa tiedoston kaikki html.Nyt voit siirtyä koodin.On olemassa useita vaihtoehtoja tallennus koodi, jonka kuvio muuttuu kuva.

  1. Kirjoita määrite tag.
  2. kautta CSS HTML-koodissa.
  3. Kirjoita CSS erilliseen tiedostoon.

Miten HTML tehdä taustakuvan, voit päättää, mutta haluaisin sanoa muutaman sanan siitä, miten se olisi kaikkein paras.Ensimmäinen menetelmä on kirjallisesti tag on pitkään ollut vanhentunut.Toinen vaihtoehto on käyttää hyvin harvoin, koska näyttää siltä, ​​että paljon samaa koodia.Kolmas vaihtoehto on yleisin ja tehokas.Tässä on HTML-koodi esimerkkejä:

  1. ensimmäinen kirjausmenettely läpi tunnisteen (elin) tiedostossa index.htm.Se on kirjoitettu tässä muodossa: (body tausta = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ body).Eli jos meillä on kuva, jonka nimi on "Kuva» ja JPG, ja kansio nimesimme «Kuvia», niin kirjaa HTML-koodi näyttää tältä: (elin tausta = "Kuvat / picture.jpg") ... (/ body).
  2. toinen menetelmässä tallennus CSS tyyli, mutta on kirjoitettu samaan tiedostoon, jonka nimi on index.htm.(Korimalli = "background: url ('../ Images / picture.jpg')").
  3. Ja kolmas tapa tallennus tehdään kaksi tiedostoa.Asiakirjan nimi index.htm tag (pää) on kirjoitettu niin rivi: (pää) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ head).Tyyli tiedosto nimeltä style.css jo kirjoittaa: body {background: url (kuvaa / picture.jpg ")}.

Miten HTML tehdä taustakuvan, keskustelimme.Nyt sinun täytyy selvittää, miten venyttää kuvan leveyden poikki koko näytön.

menetelmiä venyttely taustakuva ikkunan leveys

kuvitella meidän näyttö prosentteina muodossa.On käynyt ilmi, että koko pituus ja leveys näyttö on 100% x 100%.Meidän venyttää kuvaa tätä leveyttä.Lisää tallentaa kuvia style.css tiedoston linja, joka venyttää kuvan koko leveys ja pituus näytön.Koska se on kirjoitettu CSS tyyli?Se on helppoa!

elin

{

tausta: url (kuvaa / picture.jpg)

tausta-size: 100%;/ * Tämä viesti sopii useimmille nykyaikaiset selaimet * /

}

Joten me tajunnut, miten tehdä tausta html ruudulla.On tapa tallentaa tiedoston index.htm.Vaikka tämä menetelmä ja vanhentunut, mutta aloittelijoille on tarpeen tietää ja ymmärtää.Tag (pää) (tyyli) div {tausta-size: kansi;} (/ Style) (/ pää), tämä ennätys tarkoittaa, että myönnämme erityinen yksikkö tausta, joka sijoitetaan koko ikkunan leveys.Olemme katsoneet kaksi tapaa tehdä sivuston taustakuvan html, kuva venytetään koko näytön leveyttä missään uudet selaimet.

Miten tehdä kiinteän tausta

Jos päätät käyttää kuvaa taustakuvana tulevaisuuden web resurssi, sinun täytyy vain tietää, miten tehdä se vahvistaa, niin että se ei jousta pitkä ja ei pilata ulkonäköä.Yksinkertaisesti käyttämällä HTML-koodin rekisteröidä pieni lisäys.Sinun täytyy style.css tiedosto lisätä yhden lauseen jälkeen tausta: url (kuvaa / picture.jpg ') kiinteä;tai sen sijaan lisätään sen jälkeen puolipiste erillinen linja - position: fixed.Näin taustakuvaksi on kiinteä.Aikana vieritys sisältöä sivuston, huomaat, että teksti linjat liikkuvat, mutta tausta pysyy paikallaan.Joten opit html tehdä taustakuvan, monin tavoin.

työskennellä taulukoiden HTML

Monet kokematon web-kehittäjät, edessä pöydät ja yksiköt eivät useinkaan ymmärrä miten html tehdä taulukon taustakuvan.Kuten kaikki joukkueet HTML ja CSS-tyylejä, kieli Web-ohjelmointi on melko yksinkertainen.Ja ratkaisu tähän ongelmaan on kirjoittaa pari riviä koodia.Sinun pitäisi jo tietää, että kirjoittaminen taulukon rivejä ja sarakkeita, vastaavasti, kuten on esitetty tunnisteet (TR) ja (TD).Jotta taustalla taulukon muodossa kuvien, on tarpeen lisätä tunnisteen (taulukko), (tr) tai (TD) yksinkertainen lause viitaten kuvaan: tausta = URL kuvan.Selvyyden vuoksi, annamme pari esimerkkiä.

pöydät taustan sijaan: HTML esimerkkejä

Piirrä 2x3 pöytä ja tehdä siitä taustakuvan tallennettu kansioon "Kuvat": (taulukko tausta = "Kuvat / picture.jpg") (tr) (td)1 (/ td) (TD) 2 (/ td) (TD) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ taulukko).Joten meidän taulukko arvotaan taustalla kuva.

Nyt vetää sama levy koot 2x3, mutta lisätä kuvan sarakkeen numero 1, 4, 5 ja 6 (taulukko) (tr) (td tausta = "Kuvat / picture.jpg") 1 (/ td)(TD) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td tausta = "Kuvat / picture.jpg") 4 (/ td) (td tausta = "Kuvat / picture.jpg") 5 (/ td) (td tausta =" Kuvat / picture.jpg ") 6 (/ td) (/ tr) (/ taulukko).Nähtyään voi nähdä, että taustalla näkyy vain niissä soluissa, joissa meillä on rekisteröity, mutta ei koko pöydän.

Cross-selain päällä

On olemassa sellainen asia kuin rajat selaimen yhteensopivuutta web voimavara.Tämä tarkoittaa, että sivut sivusto on yhtä hyvin esillä erilaisissa ja versioita selaimissa.Sen pitäisi olla HTML-koodin ja CSS muokata tyyli vaatimat selaimissa.Lisäksi nykyajan älypuhelimia, monet web-kehittäjät yrittävät luoda sivustoja, jotka on sovitettu ja mobiiliversion tietokoneen ja näyttää.