Nézze meg a ma népszerű weboldalakat, és egy olyan dizájnkezelést, amelyet biztosan látni fog, a nagy, képernyőn átívelő háttérképek. A képek hozzáadásának egyik kihívása az a bevált gyakorlat, amely szerint a webhelyeknek válaszolniuk kell a különböző képernyőméretekre és eszközökre - ez a megközelítés néven ismert reszponzív webdesign.
Egy kép sok képernyőhöz
Mivel a webhely elrendezése változik és méretaránya különböző méretű, ezért a háttérképeknek is ennek megfelelően kell méretezniük a méretüket. Valójában ezek a "folyékony képek" az érzékeny webhelyek egyik legfontosabb eleme (a folyadékháló és a média lekérdezések mellett). Ez a három darab a kezdetektől fogva a reszponzív webtervezés alapeleme, de bár mindig elég könnyű volt adaptív beillesztett képek egy webhelyre (a beillesztett képek a HTML jelölés részeként kódolt grafikák), ugyanezt a háttérképekkel (amelyek CSS háttértulajdonságok segítségével vannak beillesztve az oldalba) régóta jelentős kihívást jelent sok webdesigner és kezelőfelület számára fejlesztők. Szerencsére a CSS "háttérméret" tulajdonságának hozzáadása ezt lehetővé tette.
Külön cikkben kitértünk a CSS3 tulajdonság háttérméret kinyújtani a képeket, hogy elférjenek egy ablakban, de ennél a tulajdonságnál van még jobb, hasznosabb módszer a telepítésre. Ehhez a következő tulajdonság és érték kombinációt fogjuk használni:
háttérméret: borító;
A borító kulcsszó tulajdonság megmondja a böngészőnek, hogy méretezze a képet az ablaknak megfelelővé, függetlenül attól, hogy mekkora vagy kicsi az ablak. A kép úgy van méretezve, hogy lefedje a teljes képernyőt, de az eredeti arányokat és a képarányt érintetlenül tartja, megakadályozva ezzel a kép torzulását. A képet a lehető legnagyobb méretben helyezzük az ablakba, hogy az egész ablakfelület be legyen fedve. Ez azt jelenti, hogy nem lesznek üres foltok az oldalon vagy a kép torzulása, de az is azt jelenti, hogy a kép egy része levágható, a képernyő és a kép képarányától függően kérdés. Például a kép szélei (felső, alsó, bal vagy jobb) levágódhatnak a képeken, attól függően, hogy mely értékeket használja a háttér-helyzet tulajdonsághoz. Ha a hátteret "balra fent" irányítja, akkor a képen lévő minden felesleges mennyiség az alsó és a jobb oldalon lesz. Ha középre állítja a háttérképet, akkor a felesleg minden oldalról leválik, de mivel ez a felesleg szétterül, az egyik oldalra gyakorolt hatás kevésbé fog szolgálni.
A „background-size: cover;” használata
A háttérkép készítésekor célszerű meglehetősen nagy képet készíteni. Míg a böngészők képesek kisebbé tenni a képet anélkül, hogy a vizuális minőséget érezhetően befolyásolnák, addig, amikor a böngésző egy az eredeti méreténél nagyobb méretűre, a vizuális minőség romlik, homályossá válik pixeles. Ennek hátránya, hogy az oldal teljesítményt ér el, amikor óriási képeket juttat el az összes képernyőre. Amikor ezt megteszi, ügyeljen a megfelelő működésre készítse elő ezeket a képeket a letöltési sebességre és az internetes szállításra. Végül meg kell találnia a boldog közeget a kellően nagy képméret és minőség, valamint a letöltési sebességhez megfelelő ésszerű fájlméret között.
A háttérképek méretezésének egyik leggyakoribb módja az, amikor azt szeretné, hogy a kép az oldal teljes hátterét felvegye, függetlenül attól, hogy az oldal széles-e, asztali számítógépen nézhető-e, vagy sokkal kisebb, és kézi mobilra küldi-e eszközök.
Töltse fel a képét az internetes gazdagépre, és adja hozzá háttérképként a CSS-hez:
háttérkép: url (fireworks-over-wdw.jpg);
háttérismétlés: nem ismétlés;
háttér-helyzet: középső középpont;
háttér-rögzítés: rögzített;
Először adja hozzá a böngésző előtagú CSS-jét:
-webkit-background-size: borító;
-moz-háttérméret: borító;
-o-background-size: borító;
Ezután adja hozzá a CSS tulajdonságot:
háttérméret: borító;
Különböző képek használata, amelyek megfelelnek a különböző eszközöknek
Bár az asztali vagy a laptop élményének adaptív kialakítása fontos, az eszközök sokfélesége amely hozzáférhet az internethez, jelentősen megnőtt, és a képernyőméretek nagyobb változata érkezik hogy.
Mint korábban említettük, egy nagyon nagy, adaptív háttérkép okostelefonra történő betöltése például nem hatékony vagy sávszélesség-tudatos kialakítás.
Ismerje meg, hogyan használhatja média lekérdezések képek megjelenítésére, amelyek megfelelnek azoknak az eszközöknek, amelyeken megjelennek, és tovább javítja webhelye kompatibilitását a mobil eszközökkel.