Udělejte pozadí stacionární. Opravené, rolující obrázky na pozadí

V tomto tutoriálu se blíže podíváme na technologii vytváření responzivního obrázku na pozadí, který zabere celou zobrazovanou plochu v prohlížeči v jakémkoli rozlišení. A použijeme CSS - vlastnost background-size. Bez JavaScriptu:

PŘÍKLAD
STÁHNĚTE ZDROJE

Příklady použití responzivních obrázků na pozadí

Dnes velmi oblíbené stránky, na kterých obrázek na pozadí pokrývá celou zobrazenou oblast stránky.
Některé z těchto webových stránek jsou uvedeny níže:

Sailing Collective

Digitální telepatie

Restaurace Marianne

Chcete-li dosáhnout podobného „vzhledu“ ve svém projektu, jste na správné cestě.

Základní pojmy

Zde je náš herní plán.

Použití vlastnosti background-size k pokrytí celého výřezu

Vlastnost CSS background-size lze nastavit na pokrytí. Hodnota cover instruuje prohlížeč, aby automaticky a proporcionálně zmenšil obrázek na pozadí na délku a šířku tak, aby zůstal stejný nebo větší než šířka/výška výřezu.

Použití dotazu na média k získání zmenšené verze obrázku na pozadí pro mobilní zařízení

Abychom urychlili dobu načítání stránky při malých rozlišeních obrazovky, použijeme dotaz na média, abychom získali menší verzi obrázku na pozadí. To ale není nutné a lze to vynechat. Tato technologie funguje skvěle i bez něj.

Přesto není na škodu použít zmenšené verze pozadí pro mobilní zařízení a vysvětlím proč.
Obrázek, který bude použit v příkladu, má velikost přibližně 5500 x 3600 pixelů.

S tímto rozlišením máme výhodu v dosažení pokrytí celé zobrazovací plochy na většině aktuálně vyráběných širokoúhlých monitorů, nevýhodou je však velikost obrazu. To je asi 1,7 MB.

Nechat tolik místa jen pro načtení obrázku na pozadí není každopádně dobrý nápad a v případě mobilních zařízení je to nápad velmi špatný. Navíc je takové rozlišení na obrazovkách s nízkým rozlišením prostě zbytečné ( Více vám o tom řeknu později.).

Tak. Začněme.

Html

Níže je uvedeno vše, co od označení potřebujete:

... Obsah vaší stránky ...

Elementu body přiřadíme obrázek na pozadí a dosáhneme tak plného pokrytí pozadí.

Tato technika však bude fungovat na jakémkoli prvku na úrovni bloku (jako je div nebo formulář). V případě, že šířka-výška vašeho blokového kontejneru je pohyblivá, změní se také velikost obrázku na pozadí tak, aby vyplnil celou plochu kontejneru.

CSS

Vlastnosti prvku body deklarujeme následovně:

tělo (/ * Umístění obrázku na pozadí * / obrázek na pozadí: url (images / background-photo.jpg); / * Obrázek na pozadí je zarovnán na střed v horizontální a vertikální rovině * / background-position: center center; / * Pozadí se neopakuje * / background-repeat: no-repeat; / * Pozadí je ve výřezu pevné, a proto se nepohybuje, když výška obsahu přesahuje výšku obrázku * / pozadí-připojení: pevné; / * Toto vlastnost způsobí změnu velikosti pozadí, když se změní velikost obsahujícího kontejneru * / background-size: cover; / * Barva pozadí, která se zobrazí po načtení obrázku na pozadí * / background-color: # 464646;)

Nejdůležitější hodnota nemovitosti na tomto seznamu:

background-size: cover;

Vyplatí se na to zaměřit. Tady se stane zázrak. Tato dvojice vlastnost-hodnota dává prohlížeči pokyn, aby změnil velikost obrázku na pozadí v takových proporcích, aby výška-šířka zůstala stejná nebo větší než výška-šířka samotného prvku. ( V našem případě tento prvek- tělo.)

A pak nastává nepříjemná situace u dvojice nemovitost-hodnota. V případě, že obrázek na pozadí bude mít nižší rozlišení než rozměry prvku těla, a to se může stát buď při zobrazení stránky na obrazovkách vysoké rozlišení nebo když máte na stránce spoustu obsahu, prohlížeč obrázek roztáhne.

A jak víte, když roztáhneme obrázek nad jeho skutečnou velikost, ztratíme kvalitu obrazu ( jinými slovy, objeví se pixelace):

Když je obrázek zvětšen na jeho nativní velikost, kvalita obrázku klesá.

Pamatujte na to při výběru pozadí. V ukázce používáme fotografii 5500 x 3600px velké obrazovky, a proto k něčemu takovému v tomto případě pravděpodobně nedojde.

Aby bylo naše pozadí soustředěno, prohlásili jsme následující:

pozadí-pozice: střed střed;

Tím nastavíte osy měřítka na střed výřezu.

Uděláme to. Nastavme vlastnost background-attachment na fix, abychom zajistili, že obrázek zůstane na svém místě, i když posouváme stránku dolů:

pozadí-příloha: pevná;

V ukázkovém příkladu jsem zahrnul možnost „ stáhnout nějaký obsah»Abyste mohli pozorovat chování pozadí při rolování stránky.

Jediné, co musíte udělat, je stáhnout si demo a trochu experimentovat s vlastnostmi umístění (background-attachment a background-position), abyste viděli, jak ovlivňují chování stránky a rolování na pozadí.

Následující hodnoty vlastností jsou samozřejmé.

Zkratka CSS

Výše jsem pro přehlednost definoval vlastnosti CSS v plném rozsahu.

A takto vypadá krátký záznam:

tělo (pozadí: url (pozadí-foto.jpg) střed středová obálka bez opakování opraveno;)

Jediné, co musíte udělat, je změnit hodnotu url na cestu k vašemu obrázku.

Volitelné: požadavek na média pro získání zmenšené verze obrázku na pozadí

U obrazovek s nižším rozlišením potřebujeme, aby Photoshop proporcionálně snížil rozlišení obrazu na 768 x 505 pixelů. Také jsem to spustil přes Smush.it, abych zmenšil velikost souboru. Tím se velikost zmenšila z 1 741 na 114 kilobajtů. Tím se velikost souboru snížila o 93 %.

Nechápejte mě špatně, 114 kilobajtů je v některých typech webdesignu stále docela dost k použití. A těch 114 kilobajtů stáhneme jen v případě potřeby, protože při pohledu do statistik musíte najít kompromisy mezi designem pro desktop a mobilní zařízení.

A zde je samotný mediální dotaz:

Klíčová část mediálního dotazu je ve vlastnosti max-width: 767px, což v našem případě znamená, že pokud je viewport prohlížeče větší než 767px, použije se velký obrázek.

Nevýhodou této metody je, že pokud změníte velikost okna prohlížeče například z 1200 pixelů na 640 pixelů (nebo naopak), uvidíte při načítání menšího nebo většího obrázku blikající obrazovku.

A navíc díky tomu, že některé mobilní zařízení umí pracovat ve vyšším rozlišení - např. iPhone 5 s Retina -displej v rozlišení 1136 x 640px, menší obrázek bude vypadat ošklivě.

Trepachev D.P. 2012–2020

Studenti: Mám prázdniny do 6. ledna, odpovím, kdykoli to bude možné během prázdnin,
někdy můžu na pár dní zmizet

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Základní výukový program HTML reference CSS reference OOP a MVC výukový program Video výukové programy Základní výukový program Reference Video výukové programy Základní výukový program Základní výukový program Základní výukový program Základní výukový program Výukový program pro administrátora Výukový program pro vývojáře AJAX + PHP výukový program

Vlastnost pozadí

Vlastnictví pozadí-příloha nastavuje, jak posouvat obrázek na pozadí prvku: spolu s textem nebo textem se posune přes obrázek.

Syntax

Selektor (příloha na pozadí: pevná | posouvání | místní;)

Hodnoty

Výchozí hodnota: svitek.

Příklad. Posunout hodnotu

Nyní majetek pozadí-příloha nastaven na svitek... Posouvejte svisle – uvidíte, jak se text posouvá spolu s pozadím:

nějaký dlouhý text...
body (background-attachment: scroll; background-image: url ("bg.png");) #elem (width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px ;)

Příklad. Posunout hodnotu

A teď majetek pozadí-příloha nastaven na pevný... Posouváním svisle zobrazíte snímek textu na pozadí:

nějaký dlouhý text...
body (background-attachment: fixed; background-image: url ("bg.png");) #elem (width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px ;)

stručné informace

CSS verze

Hodnoty

pevné Učiní obrázek pozadí prvku stacionárním. rolování Umožňuje, aby se pozadí pohybovalo spolu s obsahem. inherit Zdědí hodnotu od rodiče. local Pozadí je fixní na základě chování prvku. Pokud se prvek posouvá, pozadí se bude posouvat s obsahem, ale pozadí, které přesahuje hranice prvku, zůstane na svém místě.

HTML5 CSS2.1 IE Cr Op Sa Fx

pozadí-příloha

Ukázka textu

HTML5 CSS3 IE Cr Op Sa Fx

pozadí-příloha

Objektový model

document.getElementById ("elementID") .style.backgroundAttachment

Prohlížeče

PROTI internetový prohlížeč Pevná hodnota aplikace Explorer 6 funguje pouze pro značky nebo .

internet Explorer do 7.0 včetně nepodporuje dědičnou hodnotu.

Chrome podporuje hodnotu local od verze 4.0.

Safari podporuje místní od verze 5.0.

Firefox nerozumí významu slova local.

Ve výchozím nastavení, když posouváte webovou stránku s pozadím, pozadí se posouvá spolu s dalšími prvky. Někdy je to vhodné a někdy chcete, aby byl obrázek na pozadí vždy viditelný. Ke správě tohoto stavu existuje vlastnost připojení pozadí.

Hodnoty pozadí

Vlastnost může mít tři hodnoty pro přizpůsobení chování pozadí:

  • rolování (výchozí) – obrázek na pozadí se při rolování webové stránky pohybuje s ostatními prvky.
  • Fixed - hodnota opraví obrázek na pozadí, takže nebude citlivý na rolování. Při posouvání stránky dolů zůstane pozadí na pozadí nehybné.
  • místní - daná hodnota byl přidán z důvodu, že v případě lokálního rolování pozadí s hodnotou svitek Chovej se jako pevný... Když hodnota místní pozadí se posouvá s obsahem prvku a neposouvá se, pokud se neposouvá obsah (ale posouvá se s prvkem samotným).

Pro lepší pochopení toho, jak nemovitost funguje, se podívejte na příklady níže. Abyste je mohli porovnat, vaše všechny tři hodnoty přílohy na pozadí (doufejme, že při učení CSS používáte moderní prohlížeč pro stolní počítače!).

background-attachment: scroll

pozadí-příloha: pevná

pozadí-příloha: místní

Podpora prohlížeče

Desktopové prohlížeče IE9+, Edge 12+, Firefox 25+, Chrome (všechny verze), Safari 5+, Opera 11.5+ mají plnou podporu pro všechny hodnoty vlastnosti background-attachment. Z mobilní prohlížeče všechny významy rozumí Opera Mobile, Firefox pro Android, IE Mobile a QQ Browser. V jiných prohlížečích je podpora buď částečná, nebo chybí.

Dále v tutoriálu: vlastnosti background-origin a background-clip pro umístění obrázky na pozadí a ovládání trimu.

Tato malá lekce bude o tom, jak na svém webu (nebo na jednostránkové stránce) vytvořit krásné pevné pozadí, které bude plynule přecházet z jednoho obrázku na druhý, když uživatel stránku posouvá. CSS má vlastnost background-attachment: fixed, která umožňuje opravit obrázek na pozadí. To znamená, že při rolování stránky nebude rolovat se stránkou. Neexistuje ale žádná vlastnost CSS, která by obrázky při rolování změnila, takže použijeme Javascript.

Opravené pozadí pro web

Možná nerozumíte tomu, o čem píšu, tak se podívejte na ukázku a sami uvidíte tento krásný efekt:

Stažení

Jak udělat měnící se pozadí pro web?

Html

Začneme definováním HTML struktury stránky, pro kterou tento efekt provádíme:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id = "cbp-fbscroller" class = "cbp-fbscroller">

Ve štítku