Pesintä sivusto: miten tehdä taustakuvan html

Monet aloittelevat web-suunnittelijat, vain kaivaa ydin on luotu paikkoja, usein miettinyt miten html taustakuvan. Ja jos jotkut niistä voivat käsitellä tätä ongelmaa, se on edelleen ongelma aikaan venyttely koko leveys kuvan näytöllä. Samalla haluaisin nähdä sivuston näkyvät samalla kaikissa selaimissa, joten sen pitäisi täyttää rajat selaimen. Voit asettaa taustan kahdella tavalla: käyttämällä HTML-tunnisteet ja CSS-tyylejä. Kukin itselleen valitsee parhaan vaihtoehdon. Tietenkin, CSS on paljon helpompaa, koska sen koodi on tallennettu erilliseen tiedostoon ja ei vie ylimääräistä puhujat pääasiassa sivuston avainsanat, mutta ensin Tarkastellaan yksinkertaista tapa asentaa kuvan taustalla sivuston.

Basic HTML-tunnisteita luoda taustan

Joten menemme kysymys siitä, miten tehdä taustakuvan html ruudulla. Hakeakseen kauniilla paikalla, sinun täytyy ymmärtää yksi varsin tärkeä yksityiskohta: se riittää vain tehdä kaltevuus tausta tai maalata yksivärinen, mutta jos haluat lisätä taustakuvan, se ei veny koko leveydeltä näytön. Kuva oli alun perin välttämätöntä poimia tai tehdä oman suunnittelun tämän laajennuksen, jossa voit näyttää sivun sivuston. Vasta kun taustakuvan on valmis, vedä se kansioon nimeltä «Kuvat». Siinä me tallentaa kaikki käytetyt kuvat, animaatioita ja muita kuvatiedostoja. Tämä kansio on sijoitettava juurihakemistossa kaikesta html-tiedostoja. Nyt voit siirtyä ja koodin. On olemassa useita vaihtoehtoja kirjoittaa koodia, jolla taustan muuttaa kuvan.

1. Kirjoita attribuutti.
2. CSS tyyli HTML-koodissa.
3. Kirjoita CSS-tyylejä erilliseen tiedostoon.

Kuten HTML tehdä taustakuvan, voit päättää, mutta haluaisin sanoa muutaman sanan siitä, miten se olisi kaikkein paras. Ensimmäinen tapa on kirjoittaa läpi attribuutti on jo pitkään ollut vanhentunut. Toinen vaihtoehto on käyttää hyvin harvoin, koska on käynyt ilmi, että monet samaa koodia. Kolmas vaihtoehto on yleisin ja tehokas. Tässä esimerkkejä HTML-tagit:

1. Ensimmäisessä Kirjaustapaa läpi attribuutti (elin) on index.htm-tiedostoa. Se säilyttää tässä muodossa: (body tausta = "kansion_nimi / Nazvanie_kartinki.rasshirenie") (/ elin). Eli jos meillä on kuva, jonka otsikko «Kuva» ja JPG, ja kansio nimesimme «Kuvia», sitten HTML-koodin merkintä näyttää tältä: (body tausta = "Kuvat / picture.jpg") ... (/ body) .
2. Toinen menetelmä sisältää tallennuksen CSS, mutta se on kirjoitettu samaan tiedostoon, jonka nimi on index.htm. (Body style = "background: url ( '../ Images / kuva.jpg)").
3. Kolmas menetelmä tallennus tehdään kahden tietokannan. Asiakirjassa nimellä index.htm tag (pää) kirjoitetaan tällainen linja: (pää) (link rel = "stylesheet" type = "text / css" href = "http: // site / artikkeli / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ pää). Tiedosto nimeltä style.css tyyliin jo kirjoittaa: body {background: url (kuvaa / picture.jpg)}.

Kuten HTML tehdä taustakuvan, ymmärrämme. Nyt sinun täytyy selvittää, miten venyttää kuvan leveyden poikki koko näytön.

Tapoja venyttää taustakuvan, ikkunan leveys

Edustamme näytön muodossa prosentteina. On käynyt ilmi, että koko leveys ja pituus näyttö on 100% x 100%. Meidän täytyy venyttää kuvaa tämän leveyttä. Lisää kuvatiedosto tallennuksen style.css linja, jota venyttää kuvan koko leveydeltä ja pituudelta näytön. Koska se on kirjoitettu CSS? Se on helppoa!

ruumis

{

tausta: url (kuvaa / kuva.jpg)

tausta-koko: 100%; / * Tämä viesti sopii uudenaikaisin selaimet * /

}

Joten me tajunnut, miten tehdä tausta html ruudulla. Myös tapa tallentaa vuonna index.htm-tiedostoa. Vaikka tämä menetelmä ja vanhentunut, mutta aloittelijoille on välttämätöntä tietää ja ymmärtää. Tunniste (pää) (tyyli) div {background-size: kansi; } (/ Tyyli) (/ pää), tämä levy tarkoittaa sitä, että allokoida erityinen yksikkö tausta, joka asettuu koko ikkunan leveys. Olemme harkinneet kaksi tapaa, miten tehdä taustakuvan html-sivuston, jotta kuva venytetään koko näytön leveyteen missään moderneilla selaimilla.

Miten saada kiinteä tausta

Jos päätät käyttää kuvaa taustakuvana tulevaisuuden web resurssi, sinun täytyy vain tietää, miten tehdä se vahvistaa, että se ei ole venytetty pituus ja ei pilata esteettistä ulkonäköä. Yksinkertaisesti käyttämällä HTML rekisteröidä pieni lisäys. Tarvitse arkistoida style.css lisätä lauseen jälkeen tausta: url (kuvaa / kuva.jpg) kiinteitä; tai sen sijaan jälkeen lisätään puolipisteen erillisellä rivillä - kanta: kiinteä. Siten taustakuvan on kiinteä. Aikana vieritys sivuston sisältöä, näet, että tekstiriviä liikkuvat, mutta tausta pysyy paikallaan. Joten opit tekemään html taustakuvan, monella tavalla.

Työskentely taulukot HTML

Monet kokemattomat web-kehittäjille, edessä pöydät ja lohkot, eivät useinkaan ymmärrä, miten html kuvan taustan pöydän. Kuten kaikki joukkueet HTML ja CSS-tyylejä, web ohjelmointikieli 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 osoittamalla tavalla tunnisteet (TR) ja (TD). Jotta taustalla taulukon muodossa kuvan, on tarpeen lisätä tunnisteen (taulukko), (tr) tai (TD) yksinkertainen lause viitaten viite kuva: tausta = URL-kuvia. Selvyyden vuoksi annamme pari esimerkkiä.

Pöytä kuvan sijasta tausta: HTML esimerkkejä

Piirtää 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 pöydän arvotaan taustalla kuvan.

Nyt kiinnittää samalla levyn koot 2x3, mutta lisätä kuvan sarakkeet numeroidaan 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 voimme nähdä, että taustalla näkyy vain niissä soluissa, joissa me rekisteröity, eikä koko pöydän.

Cross-selain yhteensopivuus site

On olemassa sellainen asia kuin rajat selaimen yhteensopivuutta web resurssi. Tämä tarkoittaa, että sivusto on yhtä hyvin esillä erilaisissa ja versioita selaimista. Sen pitäisi olla HTML ja CSS-tyylejä muokata välttämätön selaimissa. Lisäksi nykyajan älypuhelimia, monet web-kehittäjät yrittävät luoda sivustoja ja sovitettu mobiiliversion ja tietokone näyttää.