Hogyan nyúlik a háttérben az összes böngésző ablakban négy egyszerű megoldásokat CSS és JavaScript

A cél már az, hogy a háttérkép a helyszínen ki kell terjednie valamennyi látható böngésző ablakot bármikor. Íme néhány konkrét követelmények:

* A kép kitölti a teljes oldalt, megszakítás nélkül
Ábra skálázott ha szükséges
* Elmentett kép oldalaránnyal (képarány)
* A kép középre a közepén az oldal
* Nem jelenik scrollbars
* Ha lehetséges, a legtöbb cross-browser megoldás
* Nem haszontalan különböző fleshem

Kiváló, egyszerű és progresszív módszer segítségével CSS

Meg tudjuk oldani a problémát a tiszta CSS, amelynek köszönhetően az épület háttér méretű, ami megjelent CSS3. Szükségünk van a html elem (jobb, mint a test, mert nem mindig a teljes magassága a böngésző ablakban). Kérünk háttérképet elem html, központosítva, válasszon egy fix helyzetben (fix), és állítsa be a képméretet a tulajdonságok használatával háttér méretű, amelyek meghatározzák, hogy a fedél:

html <
background: url (images / bg.jpg) no-repeat center center fix;
-WebKit-háttér-méret: fedél;
-moz-háttér-méret: fedél;
-o-háttér-méret: fedél;
háttér-méret: fedél;
>

Ezt az opciót a következő lesz:

* Safari 3+
* A Chrome bármely verzió
* IE 9+
* Opera 10+ (Opera 9.5 támogatja háttér méretű, de nem támogatja a borítón)
* Firefox 3.6+ (Firefox 4 támogatja háttér-Size tulajdonság, mint -moz előtag)

Van is egy megoldás IE, de légy óvatos - úgy gondoljuk, hogy alkalmazása után néhány linkeket az oldalon nem működnek. Ha ez megtörténik - próbáljon meg ezt a kódot, hogy blokkolja a html vagy szerv, hanem a tartalmazó div, de a szélessége és magassága a 100% -ot. Itt a kód:

szűrő: ProgAzon: DXImageTransform.Microsoft.AlphaImageLoader (src = 'myBackground.jpg.', sizingMethod = 'méretarányos');
-ms-szűrő: "ProgID: DXImageTransform.Microsoft.AlphaImageLoader (src = 'myBackground.jpg', sizingMethod = 'méretarányos')";

Csak CSS. opció №1

Ebben a példában fogjuk használni az img elemet, amely könnyen változtatni a méretét bármely böngészővel. Fogjuk használni a min-height tulajdonság, hogy kitöltse a böngésző ablakot függőlegesen és határozza meg a szélessége 100%, hogy nem ugyanaz vízszintesen. Azt is kérjük, min-width a kép nem lesz kevesebb, mint amilyen valójában.

img.bg <
/ * Set szabályokat, hogy töltse háttér * /
min-magasság: 100%;
min-szélesség: 1024 képpont;

/ * Beállítása arányos méretezés * /
szélesség: 100%;
magasság: auto;

/ * Beállítása helymeghatározás * /
összesen: fix;
top: 0;
bal: 0;
>

Úgy működik, hogy a következő böngészők:

* Bármely változatát normál böngészők: Safari / Chrome / Opera / Firefox
* IE 6: Úgy működik - de problémák vannak a rögzítő a kép
* IE 7/8: A legtöbb működik, de nincs középen kis állásfoglalásaira, és így teljesen kitölti a képernyőt
* IE 9: Works

Csak CSS. variáns №2

Van egy másik viszonylag egyszerű módja annak, hogy megoldja a problémát: használja a kép oldalunkon feltenni neki fix helyzetben a bal felső sarokban, és határozza meg a min-height és min-width 100%, miközben a képarányt.

#bg <
összesen: fix;
top: 0;
bal: 0;

/ * Megőrzése Aspet arány * /
min-szélesség: 100%;
min-magasság: 100%;
>

Azonban ez nem a képet középre, ami fontos számunkra. Meg tudjuk oldani ezt a problémát megkötésével kép egy div blokk. Ez az egység mérete 2-szer nagyobb, mint a böngésző képernyő. Amikor fel a képet a blokk, akkor pontosan a közepén a böngésző ablakot, miközben a képarány.

#bg <
összesen: fix;
top: -50%;
bal: -50%;
szélesség: 200%;
magasság: 200%;
>
#bg img <
pozíció: abszolút;
top: 0;
bal: 0;
jobbra: 0;
alsó: 0;
margin: auto;
min-szélesség: 50%;
min-magasság: 50%;
>

Ez a beállítás működik:

* Safari / Chrome / Firefox (feltehetőleg nem minden a régi verzió)
* IE 8+
* Opera (az összes verzió) és az IE, mind félreértik ezt a kódot (helytelen elhelyezése nem világos, hogy miért)

Opció programok közül jQuery