Kyky venyttää taustakuva selainikkunan koko leveydelle CSS: n avulla ilmestyi vasta sen uusimman määrityksen - CSS3 - julkaisun yhteydessä. Valitettavasti toistaiseksi suuri osa surffaajista käyttää varhaisia selaimia, jotka eivät ymmärrä CSS3-määritystä. Siksi sinun on tehtävä valinta - joko käytä vähemmän helppoa, mutta selainten välistä ratkaisua, tai korkean teknologian, mutta rajoitetulle yleisölle. Tarkastellaan molempia vaihtoehtoja.
Välttämätön
Perustiedot HTML: stä ja CSS: stä
Ohjeet
Vaihe 1
Ensimmäinen vaihtoehto perustuu aikaisempiin CSS-kielen määrityksiin. Sinun on luotava HTML-koodirakenne, jossa on kaksi päällekkäistä tasoa, toistensa yläpuolella. Tasot (div) voidaan venyttää näytön leveydelle vanhassa CSS-tyylikuvauskielimäärityksessä. Tasojen alaosaan sinun on sijoitettava taustakuva, ja ylimpään sijoitetaan koko sivun sisältö. Tällainen rakenne asiakirjan rungossa saattaa näyttää tältä:
Tämä on sivun sisältö
Ja tämän rakenteen tyylien kuvaus tulisi sijoittaa otsikko-osaan. Esimerkiksi tämä:
html, body {
marginaali: 0px;
korkeus: 100%;
}
#tausta {
sijainti: absoluuttinen;
leveys: 100%;
korkeus: 100%;
}
#body {
sijainti: absoluuttinen;
leveys: 100%;
korkeus: 100%;
z-indeksi: 2;
}
Tällöin tasot, joiden tunniste on tausta (tämä on taustakuva) ja runko (tämä on sivun sisällön taso), asetetaan absoluuttiselle sijainnille ja 100%: n leveydelle ja korkeudelle. Lisäksi sisältökerrokselle annetaan sarjanumero z-index = 2. Se määrittää kerrosten "syvyyden" - mitä suurempi se on, sitä kauemmas "pohjasta" tämä kerros sijaitsee. Meidän tapauksessamme se on taustakerroksen yläpuolella, joka käyttää oletusarvoista z-indeksiä.
Vaihe 2
Koko koodi saattaa näyttää tältä:
html, body {
marginaali: 0px;
korkeus: 100%;
}
#tausta {
sijainti: absoluuttinen;
leveys: 100%;
korkeus: 100%;
}
#body {
sijainti: absoluuttinen;
leveys: 100%;
korkeus: 100%;
z-indeksi: 2;
}
Tämä on sivun sisältö
Älä unohda korvata taustakuvatiedoston nimeä fon.png.
Vaihe 3
Toinen vaihtoehto käyttää CSS3: ssa käyttöönotettua taustakoon ominaisuutta. Lisää samalla samanlaiset ominaisuudet tyylimääritelmiin, joita aiemmin käyttivät selaimet Mozilla Firefox, Google Chrome ja Opera. Tämän version tyylikuvauslohko voi näyttää tältä:
html {
tausta: url (fon.png) ei-toistuva keskipiste kiinteä;
-webkit-background-size: kansi;
-moz-background-size: kansi;
-o-taustakoko: kansi;
taustakoko: kansi;
}
Ja tässä älä unohda korvata taustakuvan tiedoston nimeä fon.png. Itse asiakirjan rungossa tässä versiossa ei vaadita erityisiä rakenteita.
