Podívejte se na populární webové stránky dnes a jedním designovým zpracováním, které určitě uvidíte, jsou velké obrázky na pozadí pokrývající celou obrazovku. Jednou z výzev při přidávání těchto obrázků je osvědčený postup, při kterém musí webové stránky reagovat na různé velikosti obrazovek a zařízení - přístup známý jako responzivní webový design.
Jeden obrázek pro mnoho obrazovek
Vzhledem k tomu, že se rozvržení vašeho webu mění a mění se podle různých velikostí obrazovky, musí také tyto obrázky na pozadí odpovídajícím způsobem měnit svou velikost. Ve skutečnosti jsou tyto „plynulé obrázky“ jedním z klíčových kousků responzivních webů (spolu s plynulým rastrem a mediálními dotazy). Tyto tři kousky byly od samého začátku základem responzivního webového designu, ale i když vždy bylo celkem snadné přidat responzivní web vložené obrázky na web (vložené obrázky jsou grafika, která je kódována jako součást značky HTML), stejně jako obrázky na pozadí (které jsou stylizovány na stránku pomocí vlastností pozadí CSS) již dlouho představuje významnou výzvu pro mnoho webových designérů a rozhraní frontend vývojáři. Naštěstí to přidání vlastnosti „velikost pozadí“ v CSS umožnilo.
V samostatném článku jsme se zabývali tím, jak používat CSS3 vlastnost velikost pozadí roztáhnout obrázky tak, aby se vešly do okna, ale pro tuto vlastnost existuje ještě lepší a užitečnější způsob nasazení. K tomu použijeme následující kombinaci vlastností a hodnot:
velikost pozadí: obal;
Vlastnost cover keyword říká prohlížeči, aby upravil velikost obrázku tak, aby se vešel do okna, bez ohledu na to, jak velké nebo malé se toto okno dostane. Obrázek je upraven tak, aby pokrýval celou obrazovku, ale původní proporce a poměr stran zůstanou zachovány, což zabrání zkreslení samotného obrázku. Obrázek je umístěn v okně co největší, aby byla pokryta celá plocha okna. To znamená, že na stránce nebudete mít žádná prázdná místa ani žádné zkreslení obrázku, ale také znamená, že část obrazu může být oříznuta v závislosti na poměru stran obrazovky a obrazu v otázka. Například okraje obrázku (horní, dolní, levý nebo pravý) mohou být na obrázcích oříznuty, v závislosti na tom, jaké hodnoty použijete pro vlastnost umístění na pozadí. Pokud orientujete pozadí na „vlevo nahoře“, veškerý přebytek na obrázku bude vypadat ze spodní a pravé strany. Pokud vycentrujete obrázek na pozadí, přebytek vyjde ze všech stran, ale protože se tento přebytek rozloží, dopad na kteroukoli stranu bude méně sloužit.
Jak používat „velikost pozadí: obal;“
Při vytváření obrázku na pozadí je dobré vytvořit obrázek, který je poměrně velký. Zatímco prohlížeče mohou obrázek zmenšit, aniž by to mělo znatelný dopad na vizuální kvalitu, když se prohlížeč zvětší obrázek na velikost větší, než jsou jeho původní rozměry, dojde ke zhoršení vizuální kvality, rozmazání a pixelovaný. Nevýhodou je, že vaše stránka zaznamenává výkon, když doručujete obří obrázky na všechny obrazovky. Když to uděláte, ujistěte se, že správně připravte tyto obrázky na rychlost stahování a doručování na web. Nakonec musíte najít šťastné médium mezi dostatečně velkou velikostí a kvalitou obrazu a rozumnou velikostí souboru pro rychlosti stahování.
Jedním z běžných způsobů použití škálování obrázků na pozadí je, když chcete, aby tento obrázek zabral celé pozadí stránky, ať už je tato stránka široká a je zobrazena na stolním počítači nebo mnohem menší a je odeslána na kapesní počítač zařízení.
Nahrajte svůj obrázek na webového hostitele a přidejte jej do svého CSS jako obrázek na pozadí:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
pozice na pozadí: střed uprostřed;
připojení na pozadí: opraveno;
Nejprve přidejte předponu CSS prohlížeče:
-webkit-background-size: obal;
-moz-velikost pozadí: obal;
-o-pozadí-velikost: obal;
Pak přidejte vlastnost CSS:
velikost pozadí: obal;
Používání různých obrázků, které vyhovují různým zařízením
I když je důležitý responzivní design pro stolní nebo přenosný počítač, rozmanitost zařízení které mají přístup na web, významně vzrostly a přichází s větší škálou velikostí obrazovek že.
Jak již bylo zmíněno dříve, například načítání velmi velkého responzivního obrázku na pozadí do smartphonu není efektivním designem nebo s ohledem na šířku pásma.
Zjistěte, jak můžete použít mediální dotazy zobrazovat obrázky, které budou vhodné pro zařízení, na kterých se budou zobrazovat, a dále zlepšit kompatibilitu vašeho webu s mobilními zařízeními.