Nyújtsa ki a hátteret az egész oldal css-re. Nyújtsa ki a hátteret teljes szélességre CSS használatával. Ahol a CSS háttér nyújtás megoldása működne

Feladat

Nyújtsa ki a háttérképet a böngészőablak teljes szélességére a segítségével CSS használatával 3.

Megoldás

A háttér méretezéséhez a background-size tulajdonságot állítsa 100%-ra, ekkor a háttér a böngészőablak teljes szélességét elfoglalja. A böngészők régebbi verzióinál speciális tulajdonságokat kell használnia előtagokkal, amint az az 1. példában látható.

1. példa: Nyújtható háttér

HTML5 CSS 2.1 IE Cr Op Sa Fx

Eredmény ezt a példátábrán látható. 1.

Rizs. 1. Háttér nézet csökkentett ablakmérettel

A böngészőablak méretének növekedésével a háttér is tágulni kezd, ami a kép megjelenésének romlásához vezet (2. ábra).

Rizs. 2. Háttér nézet kinagyított ablakmérettel

A webtechnológiák, mint a különféle tervezési trendek, nem állnak meg, így minden alkalommal megjelennek a webhelyek eredeti funkciói és árnyalatai. Az egyik ilyen „irány” a háttér (backgorund) használata, amely a teljes képernyőn szélességben és magasságban is átnyúlik. Valami olyasmi, mint körülbelül egy éve vagy még régebben meséltem – a kép a blog fejlécébe került, és simán „áttért” a weboldal fő háttérszínébe. Ha szeretné, akár hozzáadhat is.

Egy nagy méretezhető kép háttérként való elhelyezése valami új és összetettebb dolog, amire ebben a cikkben találtam megoldást.

A lecke célja egy olyan háttérkép elhelyezése a webhelyen, amely folyamatosan lefedi a böngészőablak teljes hátterét. Pontosan mit kell tenni:

• töltse ki az egész oldalt egy képpel szóközök nélkül;
• szükség esetén a kép átméretezése (a böngészőablak csökkentése);
• a képarányok megtartása;
• a kép elhelyezése az oldal közepén;
• görgetősávok hiánya az oldalon;
• keresztböngészős megoldás különböző böngészőkhöz;
• megvalósítása harmadik féltől származó technológia, például flash nélkül.

Tehát számos megfelelő megoldás létezik a teljes képernyős weboldal hátterére.

Csodálatos, egyszerű és progresszív megoldás a CSS3 használatával

Ennek a feladatnak a végrehajtásához használhatjuk a háttérméret tulajdonságot a CSS3-ban. Olyan html elemet fogunk használni, amely jobb, mint a body. Állítsuk be a hátteret fixre és középre, majd használjuk az értékborítót a háttér-méretben.

html ( háttér: url(images/bg.jpg) nincs ismétlés középen; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: borító)

A megoldást szinte az összes népszerű a hálózaton támogatja:

• Firefox 3.6+ (a Firefox 4 támogatja a nem gyártói előtaggal ellátott verziót)
• Opera 10+ (Az Opera 9.5 támogatja a háttérméretet, de a borítóérték nélkül)
• Chrome Whatever+
• IE 9+
• Safari 3+

Egy bizonyos Goltzman talált egy megoldást, amely lehetővé teszi a hack működését az IE-ben

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")"

szűrő: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale""); De figyelem!!! ez problémákat okozhat az oldalon található hivatkozásokkal. Matt Litherland egyébként valamivel később hozzátette, hogy a kód elvileg használható, de nem használható erre. html elemeket

vagy testet, de mindent egy 100%-os magasságú és szélességű diven keresztül kell megvalósítani.CSS

- 1-es számú hack Egy alternatív változatot mutat be Doug Neiner. Ebben az esetben az oldalba beágyazott elem kerül felhasználásra

img.bg ( /* Szabályok beállítása a háttér kitöltéséhez */ min-magasság: 100%; min-szélesség: 1024 képpont; /* Arányos méretezés beállítása */ szélesség: 100%; magasság: automatikus; /* Pozicionálás beállítása */ pozíció: fix felső: 0; bal oldal: 0 ) @média képernyő és (max. szélesség: 1024 képpont) ( /* Erre a képre jellemző */ img.bg ( balra: 50%; margóra: -512 képpont); / * 50% */ ) )

A kiváló minőségű böngészők bármely verziójában működik - Safari / Opera / Firefox és Chrome. Mint mindig, az IE-nek megvannak a maga árnyalatai:

• IE 9 - működik;
• IE 7/8 - leggyakrabban megfelelően működik, de nem helyezi középre a képeket a böngészőablaknál kisebbre;
• IE 6 - testreszabható, de amúgy kinek kell ez a böngésző.

vagy testet, de mindent egy 100%-os magasságú és szélességű diven keresztül kell megvalósítani.-hack opció 2

Egy másik lehetőség a probléma megoldására CSS-stílusok használatával, ha egy soron belüli képet helyezünk el az oldalon rögzített pozícióval a bal oldalon felső sarok, majd állítsa be a min-szélességet és min-magasságot 100%-ra az arányok megtartása mellett.

#bg ( pozíció: rögzített; felül: -50%; bal: -50%; szélesség: 200%; magasság: 200%; ) #bg img ( pozíció: abszolút; felül: 0; bal: 0; jobb: 0; alsó:0 margó: min-szélesség:50% )

A hack működik:

• Safari / Chrome / Firefox (is korai változatai nincs tesztelve, de a legújabbakban jól működik)
• IE 8+
• Az Opera (bármilyen verzió) és az IE-vel együtt mindkettő ugyanúgy bugos, helymeghatározási hibával.

Módszer jQuery segítségével

Ez az opció sokkal könnyebb (CSS-szempontból), ha tudjuk, hogy a kép (háttérként használt img) képaránya nagyobb vagy kisebb, mint a böngészőablak aktuális képaránya. Ha ez kisebb, akkor csak a szélesség = 100% értéket használhatjuk, és az ablak szélességben és magasságban egyenlő mértékben lesz kitöltve. Ha több, akkor csak magasság = 100% adható meg a teljes ablak kitöltéséhez.

Minden adat elérése JavaScripten keresztül történik, a használt kódok a következők:

#bg ( pozíció: rögzített; felül: 0; bal: 0; ) .bgwidth ( szélesség: 100%; ) .bgheight ( magasság: 100%; )

$(ablak).load(function() ( var theWindow = $(ablak), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); függvény resizeBg() ( if ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

A központosítást szerintem ebben az esetben nem végzik el (amennyire én értem), de meg lehet csinálni. A legtöbb asztali böngésző támogatott, beleértve az IE7+-t is. Végül a hackelésről szóló cikk szerzője példafájlokat készített, amelyekben mindez megvalósul - letöltheti. Az eredeti cikkhez fűzött megjegyzések is tartalmaznak némi információt és vitát, bár a szerző a legtöbb fontos részletet függőlegesen kiegészítette a bejegyzéssel, és ezeket le is fordítom és jeleztem. Természetesen a példák segítenek megérteni mindezt. Általánosságban elmondható, hogy ha nem lennének az IE7 állandó „gagjai”, az összes említett hack ideális lenne.

P.S. Könyvet szeretne vásárolni? - Nem kell boltba menned, mert most egy online könyvesboltban mindent online intézhetsz - válassz, fizess és házhoz szállítást intézz.

Üdvözlet. Ebben a cikkben három módszert szeretnék megosztani, hogyan helyezhet el egy képet egy teljes oldal háttereként, pusztán HTML + CSS használatával (JS nélkül).

Tehát a háttérképre vonatkozó követelményeink a következők:

• Az oldal szélességének és magasságának 100%-át lefedi
• A hátteret szükség esetén méretezzük (a hátteret a képernyő méretétől függően megnyújtjuk vagy tömörítjük)
• A kép képaránya megmarad
• A kép az oldal közepén van
• A háttér nem okoz görgetést
• A megoldás a lehető legnagyobb mértékben kompatibilis több böngészővel
• A CSS-n kívül más technológiát nem használnak

1. módszer

Véleményem szerint ez legjobb módja, mert ez a legegyszerűbb, legtömörebb és modern. A CSS3 background-size tulajdonságot használja, amelyet a html címkére alkalmazunk. Ez html, és nem test, mert magassága nagyobb vagy egyenlő, mint a böngészőablak magassága.

Állítsa be a hátteret rögzítésre és középre, majd állítsa be a méretét a background-size: cover segítségével.

Html ( background-image: url(images/background.jpg); háttér-ismétlés: nincs ismétlés; háttér-pozíció: középen; háttér-csatolás: rögzített; -webkit-háttér-méret: borító; -moz-háttér- size: cover; -o-background-size: background-size: cover )

Ez a módszer működik

Chrome (bármilyen verzió) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

A képek gyors betöltése érdekében webhelyeit csak megbízható tárhelyszolgáltatóknál tárolja, mint például a Felhasználók és a keresőmotorok szeretem a gyors oldalakat.

2. módszer

Ha az ablak szélessége kisebb, mint a kép szélessége, egy médialekérdezés segítségével középre igazítja a hátteret.

img.background ( min-magasság: 100%; min-szélesség: 640 képpont; szélesség: 100%; magasság: automatikus; pozíció: rögzített; felül: 0; bal: 0; /* A kép méretétől függ */ @média képernyő és (max. szélesség: 640 képpont)( img.bg (bal: 50%; margó bal: -320px; ) ))

Ez a módszer a következőkben működik:

• A jó böngészők bármely verziója (Chrome, Opera, Firefox, Safari)
• IE 9+

3. módszer

Egy másik módszer a következő: javítsa ki a képet az oldal bal felső sarkába, és nyújtsa ki a 100%-os min-width és min-height tulajdonságok használatával, miközben megtartja a képarányt.

Igaz, ezzel a megközelítéssel a kép nem középre áll. De ez a probléma megoldódik a kép becsomagolásával

, amit az ablak méretének 2-szeresére készítünk. És magát a képet nyújtjuk, és középre helyezzük.

div.background ( pozíció: rögzített; felül: -50%; bal: -50%; szélesség: 200%; magasság: 200%; ) img ( pozíció: abszolút; felül: 0; bal: 0; jobb: 0; lent : 0; margó: automatikus;

Ez a módszer működik jó böngészőkés IE 8+.

Remélem, ez az információ hasznos lesz az Ön számára. Személy szerint gyakran használom ezeket a módszereket, különösen az elsőt. Valószínűleg vannak más módok is a kép háttérbe helyezésére CSS használatával. Ha tud róluk, kérjük, ossza meg őket a megjegyzésekben.

Ezt a leckét az egyiken találtam youtube csatorna. Szerintem egy webdesigner számára nagyon hasznos funkció.

Néha az eredeti kép szélessége nem elegendő egyetlen tervezési ötlethez sem, és a szélességben történő nyújtás torzítja a kívánt objektumokat. Annak érdekében, hogy ezek az objektumok érintetlenek maradjanak, miközben a kép hátterét továbbra is nyújtják, a PhotoShop bizonyos eszközöket biztosít számunkra. És így a végén az eredeti képről van szó:

Így kell kinéznie:

Kezdjük. Nyissa meg képünket a PhotoShopban, és válassza ki a szükséges objektumot:

Ezután lépjen a lapra Kijelölés >> Kijelölés mentése

És állítson be valamilyen tetszőleges nevet ennek a kijelölésnek:

Így olyan területet hoztunk létre, amely a későbbiekben védett lesz a változásokkal szemben. A következő lépés az, hogy menjen Szerkesztés >> Content Aware Scale:

És feltétlenül jelölje meg a védett objektumot:

Minden. Nincs más hátra, mint a kép szélességének megváltoztatása szabványos szerszámok(akár benne felső panel a szélesség százalékának módosításával vagy egyszerűen a kép húzásával). Fontos ezt megelőzően (vagy a kezdeti szakaszban) módosítsa a vászon méretét úgy, hogy a kép határai ne menjenek túl a láthatósági területén.

Ennek a leckének az a célja, hogy megvizsgáljuk a szervezés módjait háttérképet egy olyan webhelyhez, amely mindig a teljes böngészőablakot lefedi.

Csak CSS-t használó technika. 1. rész.

Inline elem használata , amely bármely böngészőben átméretezhető. A min-height tulajdonságot a böngészőablak függőleges kitöltésére állítjuk be, a width tulajdonságot pedig 100%-ra, hogy vízszintesen töltsük ki. A min-width tulajdonságot is úgy állítjuk be, hogy egyenlő legyen a kép szélességével, hogy soha ne legyen kisebb.

A trükk az, hogy egy médialekérdezéssel ellenőrizzük, hogy a böngészőablak szélessége kisebb-e, mint a kép szélessége, és a bal oldali tulajdonság százalékos értékének és a bal margó negatív értékének kombinációját használjuk a háttér közepére. kép.

Íme a CSS kód:

Img.bg ( /* Állítsa be a háttér kitöltésének szabályait */ min-magasság: 100%; min-width: 1024px; /* Az arányossági együttható beállítása */ szélesség: 100%; magasság: auto; /* Állítsa be a pozicionálást */ pozíció: fix felső: 0 512 képpont / * 50% */ )

Itt működik:

A normál böngésző bármely verziója: Safari / Chrome / Opera / Firefox.

IE 6: Nem működik – de használhat néhány helymeghatározási trükköt.

IE 7/8: Legtöbbször működik, nem középre állítja a kis képeket, de megfelelően kitölti a képernyőt.

IE 9: Működik.

Csak CSS-t használó technika. 2. rész.

A probléma megoldásának másik módja egy inline elem elhelyezése az oldalon rögzítse a helyzetét a bal felső sarokban, és állítsa be a min-szélesség és min-magasság tulajdonságait 100%-ra, megtartva az arányossági tényezőt.

#bg ( pozíció: rögzített; felül: 0; bal: 0; /* A képarány megőrzése */ min-szélesség: 100%; min-magasság: 100%; )

Ez azonban nem középre állítja a képet. Tekerjük tehát a képet egy elembe

. Adott

kétszer akkora lesz, mint a böngészőablak. A benne elhelyezett kép megőrzi arányait, és teljesen lefedi a böngészőablakot, pontosan középre helyezve.

#bg ( pozíció: rögzített; felül: -50%; bal: -50%; szélesség: 200%; magasság: 200%; ) #bg img ( pozíció: abszolút; felül: 0; bal: 0; jobb: 0; alsó:0 margó: min-szélesség:50% )

Itt működik:

Safari / Chrome / Firefox (nem minden verzión tesztelték, de a legújabb verziókban jól működik).

IE 8+.

Az Opera (bármely verzió) és az IE nem hajlandó ezzel a módszerrel dolgozni (a képpozícionálás helytelen).

jQuery használata

Az ötlet nagyon egyszerű, ha a kép oldalaránya (vonalelem háttérként lesz használva) a böngészőablak képarányához viszonyítva. Ha kisebb a képhez, akkor hozzá kell rendelni csak A kép szélessége 100%-ra van állítva, és mind magasságban, mind szélességben kitölti a képernyőt. És ha több, akkor rendeljen hozzá csak A kép magassága 100%-ra van állítva.

#bg ( pozíció: rögzített; felül: 0; bal: 0; ) .bgwidth ( szélesség: 100%; ) .bgheight ( magasság: 100%; )

$(function() ( var theWindow = $(ablak), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( if ((theWindow) .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Itt működik:

IE7+ (csonkkal, valószínűleg IE6-ban is működik)

Minden más böngészőben.

Következtetés

Mindegyik megoldási módnak megvannak a maga előnyei és hátrányai. Csak ki kell választania a megfelelőt egy adott esethez. Nos, vagy ajánld fel a sajátodat.