Dajte svojmu webu vizuálny záujem s grafikou na pozadí
Obrázky sú dôležitou súčasťou atraktívnych návrhov webových stránok. To zahŕňa použitie obrázkov pozadia. Ide o obrázky a grafiku, ktoré sa používajú za oblasťami stránky, na rozdiel od obrázkov, ktoré sú prezentované ako súčasť stránok s obsahom. Tieto obrázky na pozadí môžu pridať vizuálny záujem k stránke a pomôcť vám dosiahnuť vizuálny dizajn, ktorý možno hľadáte na stránke.
Ak začnete pracovať s obrázkami na pozadí, bezpochyby sa dostanete do scenára, v ktorom chcete, aby sa obrázok roztiahol tak, aby sa zmestil na stránku.
Platí to najmä pre citlivé webové stránky, ktoré sa dodávajú na širokú škálu zariadení a veľkostí obrazoviek .
Táto túžba roztiahnuť obrázok na pozadí je veľmi častou túžbou web dizajnérov, pretože nie každý obrázok zapadá do priestoru webovej stránky. Namiesto nastavenia pevnej veľkosti, rozťahovanie obrazu umožňuje, aby sa ohybne prispôsobilo stránke bez ohľadu na to, ako široké alebo úzke je okno prehliadača .
Najlepším spôsobom, ako roztiahnuť obrázok na pozadie stránky, je použiť vlastnosť CSS3 pre veľkosť pozadia. Tu je príklad, ktorý používa obrázok pozadia pre telo stránky a ktorý nastavuje veľkosť na 100% tak, aby sa vždy roztiahol tak, aby sa zmestil na obrazovku.
telo {
pozadie: url (bgimage.jpg) no-repeat;
veľkosť pozadia: 100%;
}
Podľa caniuse.com táto vlastnosť funguje v aplikáciách IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ a na všetkých hlavných mobilných prehliadačoch. To vás pokrýva za všetky dostupné moderné prehliadače, čo znamená, že by ste mali používať túto vlastnosť bez obáv, že nebude fungovať na obrazovke niekoho.
Vytváranie roztiahnutého pozadia v starších prehliadačoch
Je veľmi nepravdepodobné, že by ste potrebovali podporovať ľubovoľné prehliadače staršie ako IE9, ale predpokladajme, že máte obavy, že IE8 túto vlastnosť nepodporuje. V tomto prípade môžete falošne pretiahnuť pozadie. Môžete použiť predpony prehliadača Firefox 3.6 (-moz-background-size) a Opera 10.0 (-o-background-size).
Najjednoduchší spôsob, ako falšovať roztiahnutý obrázok na pozadí, je roztiahnuť ho na celú stránku. Potom neskončíte s väčším priestorom alebo sa musíte obávať, že váš text zapadá do roztiahnutej oblasti. Tu je postup, ako to urobiť:
id = "bg" />
- Najskôr sa uistite, že všetky prehliadače majú 100% výšku, 0 okrajov a 0 polstrovanie na elementoch HTML a BODY. Do nadpisu dokumentu HTML umiestnite nasledujúce položky:
- Pridajte obrázok, ktorý chcete byť pozadím ako prvý prvok webovej stránky, a zadať jej "bg":
- Umiestite obrázok na pozadí tak, aby bol pripevnený na hornej a ľavej strane a bol 100% široký a 100% vysoký. Pridajte to do štýlu štýlov:
img # bg {
pozícia: pevná;
top: 0;
vľavo: 0;
šírka: 100%;
výška: 100%;
} - Pridajte všetok svoj obsah na stránku vnútri prvku DIV s ID "obsahu". Pridajte DIV pod obrázok:
Poznámka: je zaujímavé pozrieť sa na vašu stránku. Obraz by sa mal zobraziť natiahnutý, ale obsah úplne chýba. Prečo? Pretože obrázok na pozadí je 100% vysoký a rozdelenie obsahu je za obrazom v toku dokumentu - väčšina prehliadačov ho nezobrazí.Všetok obsah tu - vrátane hlavičiek, odsekov atď.
- Umiestnite svoj obsah tak, aby bol relatívny a má z-index 1. To ho prinesie nad obrázok pozadia v prehliadačoch kompatibilných s normami. Pridajte to do štýlu štýlov:
#content {
pozícia: relatívna;
z-index: 1;
}
- Ale nie ste hotoví. Program Internet Explorer 6 nie je kompatibilný s normami a stále má určité problémy. Existuje mnoho spôsobov, ako skryť CSS z každého prehliadača, ale IE6, ale najjednoduchšie (a s najväčšou pravdepodobnosťou spôsobiť ďalšie problémy) je použiť podmienené komentáre. Po vložení šablóny so štýlmi do hlava dokumentu vložte nasledovné:
- Vo vnútri zvýrazneného komentára pridajte ďalší štýl štýlu s niektorými štýlmi, aby ste dostali IE 6 na pekné:
- Nezabudnite otestovať aj v IE 7 a IE 8. Možno budete musieť prispôsobiť komentáre, aby ste ich podporili. Avšak, to fungovalo, keď som to testoval.
OK - to je určite WAY overkill. Veľmi málo stránok potrebuje podporu IE 7 alebo 8 už, oveľa menej IE6!
Ako taký je tento prístup zastaraný a pravdepodobne zbytočný pre vás. Nechám to tu viac ako model zvedavosti, ako oveľa zložitejšie veci boli skôr, ako všetky naše prehliadače hrali tak pekne spolu!
Vytváranie roztiahnutej pozadia cez menšie miesto
Môžete použiť podobnú techniku ako falošný pretiahnutý obrázok na pozadí v DIV alebo inom prvku na vašej webovej stránke. Je to o niečo zložitejšie, pretože musíte použiť buď absolútne umiestnenie, alebo mať iné časti stránky.
- Umiestnite obrázok na stránku, ktorú chcem použiť ako pozadie.
- V štýle šablón nastavte šírku a výšku obrázka. Všimnite si, že môžete použiť percentá pre šírku alebo výšku, ale zdá sa mi, že je jednoduchšie nastaviť s hodnotami dĺžky pre výšku.
img # bg {
šírka: 20 mm;
výška: 30m;
} - Umiestnite svoj obsah do priečinka div s ID obsahu, ako sme urobili vyššie:
Celý svoj obsah tu
- Štýl obsahu div má rovnakú šírku a výšku ako obrázok na pozadí:
div # obsah {
šírka: 20 mm;
výška: 30m;
} - Potom umiestnite obsah do rovnakej výšky ako obrázok. Takže ak je váš obrázok 30cm, mali by ste štýl top: -30m; Nezabudnite dať index z 1 na obsah.
#content {
pozícia: relatívna;
top: -30m;
z-index: 1;
šírka: 20 mm;
výška: 30m;
} - Potom pridajte z-index -1 pre používateľov IE 6, ako ste urobili vyššie:
Opäť platí, že s veľkosťou pozadia, ktorá sa teraz teší širokej prehliadačovej podpore, je tento prístup veľmi pravdepodobne zbytočný a prezentovaný ako produkt predchádzajúcej éry. Ak ste chceli použiť tento prístup, stačí skúsiť to v čo najväčšom počte prehliadačov.
Ak sa váš obsah zmení veľkosť, budete musieť zmeniť veľkosť kontajnera a obrázok na pozadí, inak skončíte s podivnými výsledkami.