CSS: n käyttö taustakuvan asettamiseen

• Saattaa 6, 2024

Oletko koskaan miettinyt, kuinka verkkosivustot hallitsevat tekstin takana kelluvia kauniita malleja ja kuvia? Kaikki tapahtuu CSS-taulukoiden taian avulla. CSS: n avulla voit määrittää kuvan vain sivusi taustalle, mutta myös säätää, kuinka kuva näytetään - jotta saat vain haluamasi ilmeen.

Taustakuvasi perustava elementti on riittävän sopiva 'taustakuvan' ominaisuus. Käytä tätä ominaisuutta kertoaksesi sivustollesi, missä kuvatiedosto sijaitsee, seuraavasti:

vartalo {
taustakuva: url ("image.gif");
}

Se on kaikki mitä sinun täytyy tehdä asettaaksesi taustakuvan verkkosivullesi. Tietysti haluat todennäköisesti mukauttaa kuvan ulkonäköä. Oletetaan, että haluat kuvan alkavan sivun yläosasta, mutta sen keskittyvän vaakasuoraan vasemman linjan sijaan (oletusasetus). Tässä tapauksessa haluat lisätä 'tausta-sijainti' -ominaisuuden CSS-sääntöihisi:

vartalo {
taustakuva: url ("image.gif");
tausta-asema: keskiosa;
}

Kun määrität 'tausta-asema' -ominaisuuden, ensimmäinen arvo asettaa vaakasuuntaisen kohdistuksen (vasen, keskimmäinen tai oikea) ja toinen asettaa kuvan pystysuuntaisen kohdistuksen (ylä, keskusta tai ala).

Seuraavaksi päätät, että haluat estää kuvan laatoittumisen (toistumisen) vaakasuoraan, vaikka haluat sen laatoittavan pystysuunnassa. On aika tuoda esiin 'taustatoista' -ominaisuus:

vartalo {
taustakuva: url ("image.gif");
tausta-asema: keskiosa;
taustatoista: toista-y;
}

Kun asetetaan arvoksi 'toista-y', selain selataan taustakuvan y-akselia pitkin, eli pystysuunnassa, mutta ei x-akselia (vaakasuoraan), mikä on tarkalleen mitä halusimme. Jos haluat laatoittaa sen vaakasuunnassa, mutta ei pystysuunnassa, käyttäisit sen sijaan 'toista x-arvo'; Jos et halunnut kuvan laatoittuvan ollenkaan, anna sille 'ei toista' -arvo. Oletusarvo on kuvan laatta sekä vaaka- että pystysuunnassa, joten jos se on kuvallesi paras valinta, sinun ei tarvitse asettaa 'taustatoista' -ominaisuutta ollenkaan.

Lopuksi voit katsoa 'tausta-liitetiedosto' -ominaisuuden. Oletuksena kuva vierittyy sivun vierittäessä, joten jos et toista kuvaa pystysuunnassa ja sinulla on pitkä sivu, kuva ei laajennu sivun alaosaan. Voit muuttaa tätä asettamalla 'tausta-liitteen' ominaisuudeksi 'kiinteä', joka aiheuttaa taustakuvan pysyvän näytön samassa paikassa riippumatta siitä, kuinka sivu vierittää. Nyt taustakuvasäännöt näyttävät seuraavalta:

vartalo {
taustakuva: url ("image.gif");
tausta-asema: keskiosa;
taustatoista: toista-y;
tausta-liite: kiinteä;
}


Jos haluat pitää CSS-säännöt mahdollisimman pieninä, voit yhdistää kaikki tausta-arvot yhdeksi riviksi käyttämällä 'tausta' -ominaisuutta, kuten tämä:

tausta {
url ("image.gif") toista-y kiinteä keskiosa;
}

Kun käytät taustaominaisuutta, arvot on lueteltava tietyssä järjestyksessä:
[taustaväri (jos käytetään)] [taustakuva] [taustatoista] [tausta-liite] [tausta-sijainti]. Voit jättää pois kaikki arvot, joita et tarvitse, sinun on vain lueteltava arvot, joita käytät oikeassa järjestyksessä. Muuten sääntö ei toimi.

Video-Ohjeita: Section 7 (Saattaa 2024).