Hogyan készítsünk háttérképet adaptív

Teljesen adaptív háttér CSS segítségével

Ebben az útmutatóban tanulmányozzuk a reagálási háttérkép létrehozásának technológiáját, amely a böngésző teljes megtekintési területét bármilyen felbontásban elfoglalja. És használjuk, hogy CSS & #; Háttér méretű tulajdonság. JavaScript nélkül:

PÉLDA
Letöltés forrás

A mai napig a webhelyek nagyon népszerűek, amelyekben a háttérkép a teljes megjelenített oldalterületre vonatkozik.
Az alábbiakban néhány webhely közül néhány:

Vitorlázás kollektív

Digitális telepátia

Marianne étterem

Ha hasonló “megjelenést” kíván elérni a projektben & #; A megfelelő úton van.

Itt van a játék terve.

Használja a háttér méretű tulajdonságát a teljes megtekintési terület fedezéséhez

A CSS tulajdonság háttér-mérete fedezhető. A fedőlap a böngészőt automatikusan és arányosan skálázza a háttérképet a hossz és a szélesség mentén, így egyenlő, vagy több, mint a megtekintési terület szélessége / magassága.

Használja a Media lekérdezést a mobileszközök háttérképének csökkentett változata után

Az oldal betöltési idejének csökkentése a kis képernyőmeghatározásokon A média kérelmet használjuk a háttérkép csökkentett verziójának megszerzéséhez. De ez nem feltétlenül, és alacsonyabb lehet. Ez a technológia nagyszerűen és anélkül működik.

De még mindig használja a háttér csökkentett változata a mobil eszközök, az ötlet nem rossz, és megmagyarázom, miért.
A példában használt kép mérete a px-ről.

Ezzel a felbontással egy pluszban van, hogy elérjük az egész megtekintési terület lefedettségét a jelenleg előállított legtöbb szélesvásznú monitoron, de a mínuszban van képméretünk. Ez körülbelül 1,7 MB.

Hagyja el az ilyen kötetet egyedül letölteni a háttérképen, nem nagyon jó ötlet, és a mobileszközök esetében nagyon rossz ötlet. Ezenkívül ez az engedély egyszerűen felesleges a kis felbontású képernyőkön (később többet fogok mondani róla).

így. Legjobb.

Az alábbiakban megmutatja mindent, amire szükség lesz a jelölésből:

!DOCTYTE HTML HTML test tartalma az oldal / test / html

Háttérképet adunk a testelemhez, és így teljes lefedettséget fog elérni a háttérrel.

Ez a technika azonban bármely blokkelemen fog működni (ilyen asdiviiliform). Abban az esetben, ha a szélesség a blokk tartály mozgathatósága, a háttérkép megváltoztatja a méretét a tartály teljes területének elvégzéséhez.

A testelem tulajdonságait a következőképpen jelöljük:

Test {/ * A háttérkép helye * / háttérkép: URL (képek / hab); / * A háttérkép a vízszintes és függőleges repülőgépek középpontjában helyezkedik el * / háttérbeállító: középközpont; / * A háttér nem ismétlődik * / Háttér-ismétlés: NO-REPEAT; / * A háttér a megtekintési területen van rögzítve, ezért nem mozog, ha a tartalommagasság meghaladja a képmagasságot * / háttérbeapcsa: rögzített; / * Ez a tulajdonság megváltoztatja a hátteret, hogy megváltoztassa a skálát, amikor a tartály mérete * / háttérméret: fedél; / * Háttérszín, amely megjelenik a háttérkép indításakor * / háttérszín: #; }

A legfontosabb ingatlanérték ebben a listában:

Érdemes összpontosítani rajta. Itt és csoda. Ez az ingatlanértékek párja, és jelző böngészőt ad a háttérkép méretezéséhez ilyen arányban, hogy a magasságszélesség egyenlő marad, vagy meghaladja az elem magasságszélességét. (A mi esetünkben ez az elem & # test.)

És itt van egy kellemetlen helyzet egy pár tulajdonság-értékkel. Abban az esetben, ha a háttérkép kisebb felbontás lesz, mint a testelem mérete, és előfordulhat, vagy ha az oldal nagy felbontású képernyőkön jelenik meg, vagy ha az oldalon tonna tartalma van, & # #; A böngésző megnyílik a kép.

És honnan tudod, mikor nyúlik a kép a jelenlegi méretével & #; A képminőséget elveszítjük (más szavakkal, pixelizáció jelenik meg):

Amikor a kép méri a natív méret növekedését; Falls képminőség cseppek.

Ne felejtsd el, ha kiválasztja a hátteret. A DEMO Példában a nagy képernyők PX méretét használjuk, ezért ebben az esetben valami ilyesmi történik.

mozgó tovább.

Annak érdekében, hogy a háttérben kell igazítani a központban, azt nyilatkozta a következőket:

Background-position: Centre;

Ez telepíti skálatengely közepén az ablakon.

Ezután, meg kell kezelni a helyzetet, ha a tartalom magassága nagyobb, mint a magassága a megtekintési területen. Amikor ez történik & #; Megjelenik egy görgetősáv.

Megtesszük, amit. Telepítse a background-attachment tulajdonság Fixed meg kell győződni arról, hogy a kép a helyén marad, akkor is, ha pont egy oldalt le:

Háttér-attachment: fixed;

A demo, bekapcsoltam a képességét, hogy „letölt egy bizonyos tartalom”, így adja át a háttérben viselkedése, ha görgetés az oldal.

Mindössze annyit kell tennie, és meg kell tennie & #; Töltse le a demo példát és egy kis kísérletet a pozícionáló tulajdonságokkal (háttér-rögzítés és háttérpozíció), hogy hogyan befolyásolják az oldal és a háttér viselkedését görgetés közben.

A tulajdonságok következő értékei magukért beszélnek.

Felett, az egyértelműség érdekében, meghatároztam a CSS & # -t; Tulajdonságok teljes formában.

És így a rövid rekord:

Test {háttér: URL (HAB) Center Center Cover nem ismétlődő rögzített; }

Mindössze annyit kell tennie, hogy megváltoztatja az URL értékét a képen lévő útvonalon.

Opcionális: A média kérése a háttérkép csökkentett változata

A kisebb felbontású képernyőkre a Photoshop-nak az arányosnak kell lennie, hogy csökkentse a kép megoldását a px-en. Én is hiányzott a HAB-n keresztül, hogy csökkentse a fájlméretet. Ez lehetővé tette a kilobájt méretének csökkentését. Ez 93% -kal csökkentette a fájlmennyiséget.

Ne tévesszen meg, de Kilobyte még mindig nagyon sokat használjon bizonyos típusú webdesignban. És csak akkor feltöltjük ezeket a kilobájtokat, ha szükséges, mert a statisztikákat nézve kompromisszumokat kell találni az asztali és mobileszközök tervezése között.

És itt van a média kérése:

@Media csak képernyő és (max-szélesség: px) {test {/ * Itt a fájlméret 93% -kal csökken a mobileszközök letöltési sebességének növeléséhez * / háttérkép: URL (képek / hab); }}

A legfontosabb része a média kérésére zárt a max-width: PX tulajdonság, ami a mi esetünkben azt jelenti, hogy ha a böngésző nézet több mint PX & #; Nagy képet használnak.

Ennek a módszernek a mínusz, hogy ha megváltoztatja a böngészőablak méretét, mondjuk, mondjuk, px-t px-re (vagy fordítva), látsz egy csillogó képernyőt, amíg kisebb vagy nagyobb kép lesz betöltve.

És továbbá, mivel egyes mobileszközök nagyobb felbontású és #; Például iPhone 5 retina-kijelző felbontás px, a kisebb kép csúnya lesz.

A kézikönyvben használt összes kód a Githubból.

Ha hozzáadhat valamit a technika számlájához, akkor ez a következő.

Használja a fentiekben ismertetett óvatosan, mert a nagy fájlok befolyásolhatják a felhasználói interakciót, különösen akkor, ha a felhasználónak nincs elég gyors kapcsolat az internetre. És ez egy másik ok, amiért érdemes telepíteni a háttér helyes színét, hogy a webhely látogatója láthassa a tartalmat, mielőtt a háttérkép teljesen betöltődik.

Optimalizálja webes képeit a használat előtt.

Ha a kódot szeretné használni ebből a cikkből az Ön céljaira és #; Nem kell megkérdezni, hogy lehetséges-e megtenni; Minden kódot a CC0 Universal alapú nyilvános domainként kell közzétenni.

Forráskódot a repository github repo nem védi semmilyen szerzői jog. Használhatja, eladhatja, módosíthatja és terjesztheti a forráskódot. A kérés, amit nem kell.

(A háttérkép tulajdonosa nem vagyok. Tounsplash tartozik).

Sergey BenzencoAutor-Translator «Érzékeny teljes háttérkép CSS használatával»