Így érdemes felvenni a tervrajzokat a CSS használatával
Nézd meg a legnépszerűbb weboldalakat ma, és egy olyan formatervezési kezelés, amelyről biztosan látsz, nagy, képernyőn átívelő háttérkép. Az ezeknek a képeknek a hozzáadásával kapcsolatos egyik kihívás a legjobb gyakorlat, amelyet a weboldalaknak különböző képernyőméretekre és eszközökre kell reagálnia - egy olyan megközelítésnek, amely az érzékeny webdesign néven ismert.
Mivel a weboldal elrendezése megváltozik és a különböző méretű képernyő méretekkel is megegyezik, ugyanúgy ezeknek a háttérképeknek is méretüket méretük szerint kell méretezniük.
Valójában ezek a "folyadékképek" a válaszoló webhelyek egyik legfontosabb darabja (valamint egy folyadékháló és média lekérdezések). Ez a három darab a kezdetektől fogva a válaszadó webes formatervezés volt, de bármennyire egyszerűen könnyen hozzá lehet adni a reaktív inline képeket egy webhelyhez (az inline képek a HTML jelölés részeként kódolt grafikák). ugyanaz, mint a háttérképek (amelyek a CSS háttértulajdonságok segítségével vannak kialakítva az oldalra) már régóta komoly kihívást jelentett számos webes tervező és front-end fejlesztő számára. Szerencsére a "háttérkép" tulajdonság hozzáadása a CSS-ben lehetővé tette.
Egy külön cikkben rámutattam, hogyan használhatom a CSS3 tulajdonság háttérméretét a képek megnyújtására, hogy illeszkedjenek egy ablakhoz, de van még jobb és hasznos eszköz a telepítéshez ehhez a tulajdonsághoz. Ehhez a következő tulajdonság- és értékkombinációt használjuk:
háttérméret: borító;
A fedőcímkék tulajdonsága megmutatja a böngészőnek, hogy a képet úgy méretezze, hogy illeszkedjen az ablakhoz, függetlenül attól, hogy az ablak milyen nagy vagy kicsi. A kép méretezése a teljes képernyőt lefedi, de az eredeti arányok és a képarányok sértetlenek maradnak, megakadályozva ezzel a kép torzulását.
A képet az ablakban a lehető legnagyobb méretben helyezzük el úgy, hogy a teljes ablak felületét lefedjük. Ez azt jelenti, hogy az oldalán nincsenek üres foltok vagy a kép torzulása, de azt is jelenti, hogy a kép egy része kivágható a képernyő és a szóban forgó kép méretarányától függően. Például egy kép szélei (felül, alul, balra vagy jobbra) levághatók a képeken, attól függően, hogy milyen értékeket használ a háttér pozíció tulajdonságához. Ha a háttérképet a "bal felső sarokban" irányítja, a felesleges kép felugrik a jobb és bal oldalról. Ha középpontja a háttérképet, akkor a felesleg minden oldalról leereszkedik, de mivel ez a felesleg szétszóródik, az egyik oldalra gyakorolt hatás kevésbé szolgál.
A háttérméret használata: fedőlap;
A háttérkép létrehozásakor jó ötlet egy meglehetősen nagy méretű kép létrehozása. Bár a böngészők a vizuális minőségre gyakorolt jelentős hatás nélkül kisebb méretű képet készíthetnek, ha a böngésző az eredeti méreteknél nagyobb méretűre méretezi a képet, a vizuális minőség romlik, elmosódottá és pixelszerűvé válik. Ennek hátránya, hogy az oldal olyan teljesítményt ér el, amikor óriási képeket jelenít meg minden képernyőre.
Amikor ezt megteszi, győződjön meg róla, hogy megfelelően felkészíti ezeket a képeket letöltési sebességre és internetes kézbesítésre . Végül meg kell találnod a boldog közeget a nagyméretű képméret és -minőség, valamint a letöltési sebességek ésszerű fájlmérete között.
A háttérképek méretezésének egyik leghatékonyabb módja, ha azt szeretné, hogy a kép az oldal teljes hátterét megkönnyítse, függetlenül attól, hogy az oldal széles, és asztali számítógépen vagy sokkal kisebb, és kézbesítőként, mobileszközökön eszközöket.
Töltsd fel a képet az internetes kiszolgálónak, és helyezze hozzá a CSS-hez háttérképként:
háttér-kép: url (fireworks-over-wdw.jpg);
háttér-ismétlés: nem-ismétlés;
háttérpozíció: középső központ;
háttér-csatolás: fix;
Adja hozzá előbb a böngésző CSS-t:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-háttér-méret: fedél;
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
Miközben az asztali vagy a laptopos tapasztalatokra érzékeny kialakítás fontos, a webes eszközökhöz való hozzáférés jelentősen megnövekedett, és a képernyőméretek nagyobb változatossága is megmutatkozik.
Amint azt korábban említettük, például egy nagyméretű, érzékeny háttérkép betöltése egy okostelefonon, például nem hatékony vagy sávszélesség-tudatos kialakítás.
Tudja meg, hogyan használhatja a médiakérdéseket , hogy olyan képeket jelenítsen meg, amelyek megfelelnek azoknak az eszközöknek, amelyeken megjelennek majd, és tovább javítják webhelye mobileszközökön való kompatibilitását.
Jennfier Krynin eredeti cikke. Szerkesztette Jeremy Girard 12/9/12