Zde je návod, jak přidat citlivé designové obrázky pomocí CSS
Podívejte se na populární webové stránky dnes a jednu designovou úpravu, kterou si jistě uvidíte, jsou velké, obrazovky spanning pozadí. Jeden z problémů s přidáním těchto obrázků pochází z nejlepších postupů, které musí webové stránky reagovat na různé velikosti a zařízení obrazovky - přístup známý jako reaktivní návrh webových stránek .
Vzhledem k tomu, že rozložení stránek se mění a měří s různými velikostmi obrazovky, je třeba tyto obrázky na pozadí odpovídajícím způsobem měnit jejich velikost.
Ve skutečnosti jsou tyto "tekuté obrazy" jedním z klíčových dílů citlivých webových stránek (spolu s tekutými rozvody a mediálními dotazy). Tyto tři kousky byly od počátku základem citlivého návrhu webových stránek, ale přestože bylo vždy snadné přidat do webu vnímavé inline obrazy (inline obrázky jsou grafiky, které jsou kódovány jako součást značky HTML), dělat to samé s obrázky na pozadí (které jsou navrženy do stránky pomocí vlastností pozadí CSS) již dlouhou dobu představovalo významnou výzvu pro mnoho webových designérů a vývojářů front end. Naštěstí přidání vlastností "velikost pozadí" v CSS to umožnilo.
V samostatném článku jsem se zabývala tím, jak používat velikost pozadí pozadí vlastností CSS3 pro roztažení snímků tak, aby se vešly do okna, ale je ještě lepší a užitečnější způsob, jak nasadit tuto vlastnost. K tomu použijeme následující kombinaci vlastností a hodnot:
velikost pozadí: obálka;
Vlastnost klíčového slova obalu informuje prohlížeč, aby změnil velikost obrazu tak, aby odpovídal oknu, bez ohledu na to, jak velké nebo malé je to okno. Obraz je zmenšen tak, aby pokrýval celou obrazovku, ale původní poměr a poměr stran zůstanou neporušené, což brání tomu, aby obraz byl zkreslený.
Obraz je umístěn v okně co nejrozsáhleji, takže je pokryt celý povrch okna. To znamená, že na vaší stránce nebudete mít prázdná místa ani žádné zkreslení, ale také to znamená, že část obrazu může být oříznuta v závislosti na poměru stran obrazovky a daného obrázku. Například hrany obrazu (horní, dolní, levý nebo pravý) mohou být na snímcích vyříznuty v závislosti na tom, které hodnoty použijete pro vlastnost pozice pozadí. Orientujete-li pozadí na "vlevo nahoře", jakýkoliv přebytek na obrázku bude vypadat ze spodní a pravé strany. Pokud vycentrovíte obrázek na pozadí, přebytek bude vypadat ze všech stran, ale protože tento přebytek je rozložen, dopad na kteroukoli stranu bude méně sloužit.
Jak používat velikost pozadí: obálka;
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 snížit snímek bez znatelného dopadu na vizuální kvalitu, když prohlížeč zvětší obraz na velikost větší, než je jeho původní rozměry, bude vizuální kvalita zhoršena, čímž se rozmazává a je zrnitá. Nevýhodou je, že vaše stránky se projeví výkonem, když přinášíte obrovské obrázky na všechny obrazovky.
Když to uděláte, ujistěte se, že tyto obrázky správně připravíte pro rychlost stahování a webovou dodávku . Nakonec musíte najít šťastné médium mezi dostatečně velkou velikostí obrazu a kvalitou a přiměřenou velikostí souboru pro rychlosti stahování.
Jedním z běžných způsobů, jak používat měřítko na pozadí, je, když chcete, aby tento obrázek zaujal plné pozadí stránky, ať už je tato stránka široká a je zobrazována na stolním počítači, nebo mnohem menší a je odesílána do kapesního, mobilního zařízení.
Nahrajte svůj obrázek do webového hostitele a přidejte jej do CSS jako obrázek na pozadí:
obrázek-pozadí: url (ohňostroj-přes-wdw.jpg);
opakování pozadí: neopakovat;
pozici pozadí: centrum;
příloha na pozadí: opraveno;
Nejprve přidejte prohlížeč s prefixem CSS:
-webkit-background-size: kryt;
-moz-pozadí-velikost: kryt;
-o-pozadí-velikost: kryt;
Pak přidejte vlastnost CSS:
velikost pozadí: obálka;
Použití různých obrázků, které vyhovují různým zařízením
Přestože je důležitý design pro práci s počítačem nebo notebookem, značná rozmanitost zařízení, která mohou přistupovat k webu, přichází s větším rozsahem obrazovky.
Jak již bylo zmíněno dříve, načítání velice citlivého snímku na pozadí do smartphonu, například, není efektivní design nebo šířka pásma.
Přečtěte si, jak můžete pomocí dotazy médií zobrazovat obrázky, které budou vhodné pro zařízení, na která budou zobrazena, a dále vylepšit kompatibilitu svých webových stránek s mobilními zařízeními.
Původní článek Jennifer Krynin. Upravil Jeremy Girard 9/12/17