A CSS3 segítségével kihúzhat egy háttérképet a weblap illesztéséhez

A képek a vonzó webes tervek fontos részét képezik. Ez magában foglalja a háttérképek használatát. Ezek a képek és grafikák, amelyeket használnak mögött az oldal területei, ellentétben azokkal a képekkel, amelyek a tartalmi oldalak részeként szerepelnek. Ezek a háttérképek vizuális érdeklődést mutatnak egy oldalhoz, és segítenek elérni azt a vizuális tervet, amelyet egy oldalon kereshet.

Ha elkezdi dolgozni a háttérképeket, kétségtelenül be fog járni a forgatókönyvbe, ahol a képet el szeretné húzni, hogy illeszkedjen az oldalhoz. Ez különösen igaz a választható weboldalakra, amelyeket a készülékek és a képernyőméretek széles skálájához szállítanak.

Ez a vágy, hogy kiterjessze a háttérképet nagyon gyakori vágy a webes tervezők, mert nem minden kép illeszkedik a térben a honlapon. Ahelyett, hogy rögzített méretűre állítanánk, a kép nyújtása lehetővé teszi, hogy az oldalhoz illeszkedjen, függetlenül attól, hogy a böngésző ablak mennyire széles vagy keskeny.

A legegyszerűbb módja annak, hogy egy adott oldal hátteréhez illeszkedjen egy kép, a CSS3 tulajdonság használatához, háttérméret esetén. Íme egy példa, amely egy oldal testének háttérképét használja, és a méret 100% -ra állítja, hogy mindig a képernyőhöz illeszkedjen.

test { háttér: url (bgimage.jpg) no-repeat; háttérméret: 100%; }

A caniuse.com szerint ez a tulajdonság az IE 9+, a Firefox 4+, az Opera 10.5+, a Safari 5+, a Chrome 10.5+ és az összes nagyobb mobilböngésző esetében működik. Ez magában foglalja az összes mai modern böngészőt, ami azt jelenti, hogy ezt a tulajdonságot anélkül használja, hogy nem fog működni valaki képernyőjén.

Feszített háttérképek futtatása a régebbi böngészőkben

Nagyon valószínűtlen, hogy támogatnod kell az IE9-nál régebbi böngészőket, de tegyük fel, hogy aggódsz, hogy az IE8 nem támogatja ezt a tulajdonságot. Ebben az esetben feszített háttérképet tehet fel. És használhatja a Firefox 3.6 böngésző előtagjait (-moz-háttér-méretű) és Opera 10.0 (-o-háttér-méretű).

A legegyszerűbb módja a feszített háttérkép megtalálásának, ha az egész oldalon átnyúlik. Akkor nem ér véget extra hely, vagy aggódnia kell, hogy a szöveg illeszkedik a feszített területen. Íme, hogyan kell csinálni:

id = "bg" />

1. Először győződjön meg róla, hogy minden böngésző 100% -os magasságban, 0 margóban és 0-ban van kitöltve a és aHTML TEST elemekkel. Tegye a következőket a HTML dokumentum fejrészébe:
2. Adja hozzá azt a képet, amelyik a háttér, mint a weboldal első eleme, és adja meg azt id "bg":
3. Helyezze el a háttérképet úgy, hogy a tetején és a bal oldalon rögzítse, és 100% -ban széles és 100% magasságban legyen. Adja hozzá a stíluslapjához:
   1. img # bg {
   3. pozíció: fix;
   5. top: 0;
   7. balra: 0;
   9. szélesség: 100%;
   11. magasság: 100%;
   13. }
4. Adja hozzá az összes tartalmat a DIV elem egy id a "tartalom". Adja hozzá a DIV a kép alatt:Itt minden tartalom - beleértve a fejléceket, bekezdéseket stb.
   1. Megjegyzés: Érdekes most megnézni az oldalt. A kép megjelenik kifeszítve, de a tartalmad hiányzik. Miért? Mivel a háttérkép 100% -ban magasságban van, és a tartalomosztály után a dokumentum áramlásának képét - a legtöbb böngésző nem fogja megjeleníteni.
5. Helyezze el a tartalmát úgy, hogy relatív, és legyen z-index 1. Ez a szabványos böngészők háttérképe fölé emeli. Adja hozzá a stíluslapjához:
   1. #tartalom {
   3. pozíció: relatív;
   5. z-index: 1;
   7. }
6. De még nem végeztél. Az Internet Explorer 6 nem szabványoknak megfelelő, és még mindig vannak problémák. Számos módon lehet elrejteni a CSS-t minden böngészőből, de az IE6-ot, de a legegyszerűbb (és a legkevésbé valószínű, hogy más problémákat okoz) feltételes megjegyzéseket használ. Tegye a következőket a stíluslapja után a dokumentum fejlécében:
7. A kijelölt megjegyzésen belül egy másik stíluslapot adjon hozzá néhány stílushoz, hogy az IE 6-hoz könnyedén játszhasson:
8. Győződjön meg róla, hogy az IE 7 és az IE 8 is tesztel. Lehet, hogy módosítania kell a megjegyzéseket, hogy támogassák őket. Azonban működött, amikor teszteltem.

OK - ez persze túlzás. Nagyon kevés webhelynek kell támogatnia az IE 7 vagy 8-at, sokkal kevesebb IE6-ot! Mint ilyen, ez a megközelítés elavult és valószínűleg felesleges számodra. Többet hagyok itt, mint a kíváncsiság modellje, hogy mennyire nehezebbek a dolgok, mielőtt minden böngészőnk olyan szépen játszott volna együtt!

Kihúzódó háttérkép készítése egy kisebb helyiségben

Hasonló technikát használhatsz egy feszített háttérképre DIV vagy egy másik elemet a weboldalon. Ez kicsit trükkös, mivel vagy abszolút pozícionálást kell használnia, vagy külön oldalakra van szüksége az oldal más részeihez.

1. Helyezze el a képet az oldalon, amelyet háttérként szeretnék használni.
2. A stíluslapban állítsa be a kép szélességét és magasságát. Fontos megjegyezni, hogy a szélesség vagy a magasság százalékos arányát használhatja, de könnyebben beállíthatom a magassághoz tartozó hosszúságértékeket.
   1. img # bg {
   3. szélesség: 20em;
   5. magasság: 30em;
   7. }
3. Helyezze el a tartalmadat a div-val a id "tartalom", mint fent:Az összes tartalom itt
4. Állítsd be a tartalom div méretét és szélességét, mint a háttérkép:
   1. div # content {
   3. szélesség: 20em;
   5. magasság: 30em;
   7. }
5. Ezután állítsa be a tartalmat a kép magasságához.Tehát, ha a képed 30em lenne, akkor a stílus felső: -30em; Ne felejtsd el a z-indexet 1-re tenni a tartalomra.
   1. #tartalom {
   3. pozíció: relatív;
   5. top: -30em;
   7. z-index: 1;
   9. szélesség: 20em;
   11. magasság: 30em;
   13. }
6. Ezután adjon hozzá egy z-indexet az IE 6 felhasználóinak -1-hez, ahogyan a fentieknél is tette:

Ismét, a háttértámogatást élvező, széles böngészős támogatással élve, ez a megközelítés nagyon valószínű, felesleges és egy elavult korszak terméke. Ha ezt a megközelítést szeretné használni, mindenképpen tesztelje ezt annyi böngészőben, amennyit csak tud. És ha a tartalma megváltoztatja a méretét, meg kell változtatnia a konténer méretét és a háttérképet, különben furcsa eredményeket fog kapni.