Adjon vizuális érdeklődést webhelyének háttérképével
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 azok a képek és grafikák, amelyeket az oldalak mögött használnak, szemben 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 (-moz-background-size) és az Opera 10.0 (-o-background-size) böngésző előtagjait .
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" />
- Először is győződjön meg róla, hogy minden böngésző 100% -os magasságban, 0 margóban és 0-ban töltötte ki a HTML és BODY elemeket. Tegye a következőket a HTML dokumentum fejrészébe:
- Adja hozzá azt a képet, amelyik a háttér, mint a weboldal első eleme, és adja meg a "bg" azonosítóját :
- 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:
img # bg {
pozíció: fix;
top: 0;
balra: 0;
szélesség: 100%;
magasság: 100%;
} - Adja hozzá az összes tartalmat egy DIV elem belsejébe, a "tartalom" azonosítóval. Adja hozzá a kép alatti DIV-et:
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% -os magasságban van, és a tartalomosztály a dokumentum áramlását követő kép után van, a legtöbb böngésző nem fogja megjeleníteni.Itt minden tartalom - beleértve a fejléceket, bekezdéseket stb.
- Állítsa be a tartalmat úgy, hogy relatív, z-indexe 1. Ez a szabványos böngészők háttérképe fölé emeli. Adja hozzá a stíluslapjához:
#tartalom {
pozíció: relatív;
z-index: 1;
}
- 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:
- 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:
- 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álhat a kifeszített háttérképre a DIV-en vagy egy másik elemen keresztül 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.
- Helyezze el a képet az oldalon, amelyet háttérként szeretnék használni.
- 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.
img # bg {
szélesség: 20em;
magasság: 30em;
} - Helyezze el a tartalmadat a div-val a "tartalom" kifejezéssel, mint fent.
Az összes tartalom itt
- Állítsd be a tartalom div méretét és szélességét, mint a háttérkép:
div # content {
szélesség: 20em;
magasság: 30em;
} - 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.
#tartalom {
pozíció: relatív;
top: -30em;
z-index: 1;
szélesség: 20em;
magasság: 30em;
} - 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.