Hogyan nyúlik a háttérképet teljes szélességében az egység, a képernyő, a tervezés és fejlesztés a helyszínen

Jó napot kívánok. 🙂

Egyszer kért módon nyúlik háttér blokk vagy az egész oldalt, hogy az teljes szélességében és magasságában. És hogy, hogy van egy automatikus méretezés a háttérben. Azaz, nem csak nyúlik, és elveszítik a kép arányait, és azt a látszatot jobb torzítás nélkül.

Azt turkált emlékszem egy csomó információt, és próbált jó néhány módja, míg meg nem találta a nevét egy döntést kellett lennie abban a pillanatban.

Az alábbiakban bemutatjuk, 3 módon, hogy nyúlik a háttérben az egész képernyőt.

Az egyik módszer a tiszta CSS3. Mindent származik az ingatlan háttér méretű. Az én esetemben, én húzni a képet az egész képernyőt, vagyis szükséges tulajdonságokkal a szervezetben tag. Akkor lehet alkalmazni, ha szükséges, hogy blokkolja például.

Nyújtsd a teljes képernyőt itt lesz ez a kép egy aranyos lány 🙂

Ahogy meghatározásakor a közös egységet, amely kijelöli stíluskeveredések lap fájlt fűz a mondatba az alábbi kódot:

Mint látható, a háttérben egy paraméter-elérési utat a képet és állítsa be a képet a képernyőn. Ebben az esetben a központ és a tetején. Ez azt jelenti, hogy a kép lesz a képernyő közepén, és szorította a lovaglás a képernyő felső részén. Ez biztosítja, hogy mindig van látta a lány arcát. Ha tetszik az absztrakt vagy természetben, ahol láthatjuk az eget, mező, horizont, tudunk szállítani érték központ és a központ. Általában, ha ismeri a CSS, azt hiszem, ez lesz lebontották. Is létrehozott rögzített. amely rögzíti a képet.

A módszer nagyon egyszerű, tudom használni, és mindig illik hozzám, a 100%. Csak egy dolog. Régebbi böngészők nem ismerik a CSS3, így azok, akik a régi verziót nem fogja látni a megfelelő eredményt.

Ez a módszer egy hagyományos CSS. Tény, hogy túl egyszerű. Következtetések A szervezetben a kép hozzárendelésével helyszínen id - bg:

És felírni stílusok:

Fix elhelyezése és nyújtás halad az egész ekran.Vot olyan egyszerű :).

Ott szokott jQuery. Ezért először meg kell, hogy tartalmazza a könyvtár, ha nincs csatlakoztatva előtt.

Miután csatlakoztatta a könyvtár script, ami a skála háttér

Továbbá, amint azt már a második módszer, a helyszín a szervezetben, egy képet, és rendeljen hozzá egy id, mint a BG.

És a végén adjuk hozzá stílusokat, hogy minden jól működjön. Megnyit egy fájlt a stílusok és adjuk hozzá a következő kódot:

Style látható, hogy van hozzá elhelyezése. Ebben az esetben ez fix. A fényképek görgetés közben rögzítve marad háttérben, de ha a változás az elhelyezése abszolút. A háttérben lehet görgetni. By the way, az azonos lehet tenni az első két módszer.

Szintén megadott paramétert - z-index: -1. úgy, hogy a kép a szöveg. Ha van egy szöveg, amit be kell előtte, akkor távolítsa el ezt a lehetőséget.

Melyik módszert használja, úgy dönt. Mint már említettük, közelebb állok az első módszer. Ő a legegyszerűbb és nem rosszabb, mint a többi.

Ez minden, köszönöm a figyelmet. 🙂

Ha hasznos volt a munkámhoz, támogatni tudja a helyszínen :)

Szia kedves barátom

Van AdBlock telepített bővítmény vagy hasonlók. Add oldalamon a fehér listát, és így vnesesh hozzájárulnak kialakulásához. Arról, hogy hogyan tiltsa AdBlock szeretné ezt az ablakot