Proč se nezobrazuje obrázek na pozadí? Proč se při tisku nezobrazí obrázek na pozadí?

V CSS 2 je nemožné přidat dvě pozadí k jednomu prvku současně, takže musíte jeden prvek vnořit do druhého a každému dát vlastní obrázek na pozadí. U složitých rozvržení lze takových příloh někdy počítat asi na tucet. Je jasné, že takový pile-up nevede k ničemu dobrému, ale co dělat? Ukazuje se, že tam něco je! V CSS 3 můžete k libovolnému prvku přidat více obrázků na pozadí současně. Vezmeme tedy blokovou kresbu (obr. 1), rozřežeme ji na kousky a začneme ji testovat v prohlížečích.

Rýže. 1. Blokovat pro web

Pro jednoduchost vezmu šířku bloku jako pevnou velikost a výška se bude lišit v závislosti na obsahu. Horní a spodní část je na výkresu dobře vidět, v editoru je vystřihnu a složím do vrstev v samostatném souboru. Střední část musí být zvolena tak, aby se svisle opakovala bez švů. Design má dobře definovaný opakující se vzor, ​​takže by neměly být žádné potíže s jeho zvýrazněním. Kopíruji a vkládám do předchozích fragmentů. Výsledkem bude takový obrázek (obr. 2).

Rýže. 2. Připravené obrázky

V zásadě můžete každý fragment uložit jako samostatný soubor, ale CSS sprity (tzv. technologie lepení několika obrázků do jednoho) mají řadu výhod. Za prvé se snižuje počet požadavků na server díky snížení počtu souborů a za druhé se celkově rychleji načítají a zobrazují obrázky.

Samotné pozadí je zobrazeno pomocí vlastnosti background, která také určuje souřadnice požadovaného fragmentu. Parametry každého pozadí jsou uvedeny oddělené čárkami a v tomto případě záleží na jejich pořadí. Chci, aby se horní a spodní část bloku nepřekrývaly, takže je dám jako první (příklad 1).

Příklad 1. Několik obrázků na pozadí

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

První pozadí zobrazuje horní okraj bloku, druhé pozadí - spodní a třetí - vertikální okraje.

Kontrolujeme prohlížeče. Internet Explorer 8 nezobrazoval vůbec žádné obrázky, ostatní prohlížeče (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) zobrazovaly rámeček správně (obr. 3).

Rýže. 3. Zobrazení snímků v prohlížeči Safari

Použití více pozadí vývojářům výrazně usnadňuje situaci, zejména při rozkládání bloků. Zbývá jen jedna maličkost. Je nutné, aby přestal existovat prohlížeč IE 6–8.

Pomocí jediné vlastnosti pozadí můžete k jednomu prvku přidat více obrázků pozadí. To vám umožňuje použít jeden prvek k vytvoření složitého pozadí nebo jednoho obrázku a zobrazit jej několikrát s různým nastavením. Všechny obrázky s jejich parametry jsou uvedeny oddělené čárkami, přičemž obrázek, který je zobrazen nad ostatními obrázky, je označen jako první a poslední, respektive nejnižší obrázek. Příklad 1 ukazuje, jak vytvořit pozadí se třemi obrázky.

Příklad 1. Tři pozadí

Pokud potřebujete samostatně nastavit nějakou vlastnost stylu pro pozadí, jako je velikost pozadí jako v příkladu výše, pak jsou parametry pro každé pozadí uvedeny oddělené čárkami. Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Pozadí se třemi obrázky

Jednotlivé obrázky na pozadí vám umožňují měnit jejich polohu a také je animovat, jak ukazuje příklad 2.

Příklad 2: Animované pozadí

Uvažujme nyní, jak pomocí jednoho obrázku vytvořit blok s rámečkem (obr. 2). Šířka bloku je pevná a výška se mění v závislosti na objemu obsahu bloku.

Rýže. 2. Ručně kreslený rám

Na obrázku jsou jasně vidět horní a spodní části, které je potřeba v grafickém editoru vyříznout a umístit vodorovně. Střední část je vybrána tak, aby se svisle opakovala bez švů. Obrázek má výrazný opakující se vzor, ​​takže by nemělo být problém ho zvýraznit. Výsledkem bude připravený snímek (obr. 3). Kostkované pole označuje průhlednost, umožňuje nastavit barevné pozadí spolu s obrázky a snadno je měnit pomocí stylů.

Rýže. 3. Obrázek připravený pro pozadí

Samotné pozadí je zobrazeno pomocí vlastnosti background, která také určuje souřadnice požadovaného fragmentu. Parametry každého pozadí jsou uvedeny oddělené čárkami a v tomto případě záleží na jejich pořadí. Chceme, aby se horní a spodní část bloku nepřekrývaly, proto je položíme jako první (příklad 3). Barva pozadí je specifikována jako poslední.

Příklad 3. Několik obrázků na pozadí

První pozadí zobrazuje horní okraj bloku, druhé pozadí - spodní a třetí - vertikální okraje. Poslední je barva, která je viditelná v průhledné střední části bloku (obr. 4).

• Tutorial

Již jsme se dotkli možností modulu CSS3 Backgrounds and Borders, při pohledu na práci se stíny (). Dnes si něco málo povíme o další zajímavé funkci – použití více obrázků na pozadí.

Složení pozadí

Existuje mnoho důvodů, proč vůbec chtít skládat více obrázků na pozadí, z nichž nejdůležitější jsou:

• úspora provozu na velikosti obrázků, pokud jednotlivé obrázky váží celkově méně než obrázek se zploštělými vrstvami a
• nutnost nezávislého chování jednotlivých vrstev např. při implementaci paralaxových efektů.

Možná jsou i jiné rozumné důvody :)

Klasický přístup

Potřebujeme tedy umístit několik obrázků na pozadí jeden na druhý. Jak se tento problém obvykle řeší? Je to velmi jednoduché: pro každý obrázek na pozadí je vytvořen blok, ke kterému je přiřazen odpovídající obrázek na pozadí. Bloky jsou buď vnořené do sebe, nebo umístěny v řadě s příslušnými pravidly umístění. Zde je jednoduchý příklad:

Blok s třídou "rybaření" uvnitř "mořská panna" je pouze pro demonstrační účely.

Nyní několik stylů:
.sample1 .more, .sample1 .mermaid, .sample1 .fishing ( výška:300px; šířka:480px; pozice: relativní; ) .sample1 .sea (pozadí: url(media/sea.png) repeat-x vlevo nahoře; ) .sample1 .mermaid ( pozadí: url(media/mermaid.svg) repeat-x dole vlevo; ) .sample1 .fish ( background: url(media/fish.svg) no-repeat; height:70px; width:100px; left : 30px; nahoře: 90px; pozice: absolutní; ) .sample1 .fishing ( background: url(media/fishing.svg) neopakovatelné nahoře vpravo 10px; )

Výsledek:

V tomto příkladu jsou tři vnořená pozadí a jeden blok s rybami umístěnými vedle bloků „pozadí“. Teoreticky lze ryby přesouvat například pomocí JavaScriptu nebo CSS3 Transitions/Animations.

Mimochodem, tento příklad pro „.fishing“ používá novou syntaxi pro umístění na pozadí, která je také definována v CSS3:
pozadí: url(media/fishing.svg) bez opakování vpravo nahoře 10px;
V současnosti je podporován v IE9+ a Opeře 11+, ale není podporován ve Firefoxu 10 a Chrome 16. Uživatelé posledních dvou prohlížečů tedy zatím nebudou moci chytat ryby.

Více pozadí

Na pomoc přichází nová možnost přidaná do CSS3 – možnost definovat více obrázků na pozadí pro jeden prvek. Vypadá to takto:

A odpovídající styly:
.sample2 .sea ( výška:300px; šířka:480px; pozice: relativní; obrázek na pozadí: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); background-position: vpravo nahoře 10px, vlevo dole, vlevo nahoře; background-repeat: no-repeat, repeat-x, repeat-x ; ) .sample2 .fish ( background: url("media/fish.svg) ") no-repeat; výška: 70px; šířka: 100px; vlevo: 30px; nahoře: 90px; pozice: absolutní; )
Chcete-li definovat více obrázků, musíte použít pravidlo obrázku na pozadí, které uvádí jednotlivé obrázky oddělené čárkami. Další pravidla, také seznam, mohou nastavit umístění, opakování a další parametry pro každý obrázek. Všimněte si pořadí, ve kterém jsou obrázky uvedeny: vrstvy jsou uvedeny zleva doprava od nejvyššího k nejnižšímu.

Výsledek je úplně stejný:

Jedno pravidlo

Pokud ryby nemusí být pro následné manipulace rozděleny do samostatného bloku, lze celý obrázek přepsat pomocí jednoho jednoduchého pravidla:

Styly:
.sample3 .sea ( výška:300px; šířka:480px; pozice: relativní; obrázek na pozadí: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); background-position: vpravo nahoře 10px, vlevo dole, 30px 90px, vlevo nahoře; background-repeat: no-repeat, repeat-x; )

Nebudu ukazovat obrázek výsledku - věřte mi, shoduje se se dvěma obrázky výše. Pozor ale opět na styly, zejména „background-repeat“ – podle specifikace, pokud část seznamu na konci chybí, pak musí prohlížeč zadaný seznam zopakovat tolikrát, aby odpovídal počtu obrázků v seznamu.

V tomto případě je to ekvivalentní tomuto popisu:
background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;

Ještě kratší

Pokud si pamatujete CSS 2.1, definovalo schopnost popsat obrázky na pozadí v krátké podobě. Co takhle více obrázků? To je také možné:

Sample4 .sea (výška:300px; šířka:480px; pozice: relativní; pozadí: url("media/fishing.svg") vpravo nahoře 10px bez opakování, url("media/mermaid.svg") vlevo dole repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Ale všimněte si, že nyní nemůžete jen přeskočit hodnoty (pokud neodpovídají výchozí hodnotě). Mimochodem, pokud chcete nastavit barvu obrázku na pozadí, musíte to udělat v úplně poslední vrstvě.

Dynamické obrázky

Pokud je kompozice statická nebo nanejvýš dynamická v závislosti na velikosti kontejneru, pak vícenásobné pozadí zjevně zjednodušuje návrh stránky. Co když ale potřebujete pracovat s jednotlivými prvky kompozice nezávisle na javascriptu (přesunout, posouvat atd.)?

Mimochodem, zde je příklad ze života - téma s pampeliškou v Yandexu:


Pokud se podíváte do kódu, uvidíte něco takového:

...

Bloky s třídami "b-fluff-bg", "b-fluff__cloud" a "b-fluff__item" obsahují obrázky na pozadí, které se navzájem překrývají. Pozadí s mraky se navíc neustále roluje a po obrazovce létají pampelišky.

Dá se to přepsat pomocí více pozadí? V zásadě ano, ale za předpokladu 1) podpory této funkce v cílových prohlížečích a... 2) čtěte dále;)

Jak přidat dynamiku více pozadím? V takové situaci se ukazuje jako vhodné, že v interní reprezentaci prohlížeč rozděluje jednotlivé parametry obrázků na pozadí podle příslušných pravidel. Například pro polohování je „pozadí-pozice“ a pro směny stačí změnit pouze toto. Používání více obrázků je však zpoplatněno – toto pravidlo (a jakékoli podobné) vyžaduje, abyste uvedli pozici pro všechna pozadí definovaná pro váš blok, a nemůžete to dělat selektivně.

Chcete-li přidat animaci na naše pozadí ryb, můžete použít následující kód:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mořská pannaX = 0; var t = 0; funkce animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mořská pannaX = 0; rybaY = -10 + (10* Math.cos(t*0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px, " + mořská pannaX + "px bottom," + fishesX + "px" + fishesY + "px, vlevo nahoře"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Kde
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.setTimeout(callback, 1000 / 60 ); )); )) ();

A mimochodem, animace se dají dělat i pomocí CSS3 Transitions/Animations, ale to je téma na samostatnou diskusi.

Paralaxa a interaktivita

A konečně, podobné manévry mohou snadno přidat paralaxové efekty nebo interaktivní interakci s pozadím:

V takových scénářích je užitečné více obrázků na pozadí, protože zatímco mluvíme pouze o pozadí (a ne o obsahu), jejich použití nám umožňuje vyhnout se zahazování html kódu a DOM. Ale všechno má svou cenu: Nemohu přistupovat k jednotlivým prvkům kompozice podle názvu, ID, třídy nebo jiného parametru. Musím si výslovně pamatovat pořadí prvků ve složení v kódu a pro každou změnu jakéhokoli parametru jakéhokoli prvku musím ve skutečnosti slepit řádek popisující hodnoty tohoto parametru pro všechny prvky a aktualizovat jej pro celé složení.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px, " + mořská pannaX + "px bottom," + fishesX + "px" + fishesY + "px, vlevo nahoře";

Jsem si jistý, že se to dá zabalit do pohodlného javascriptového kódu, který se postará o virtualizaci vztahů s jednotlivými vrstvami, přičemž html kód stránky zanechá maximálně čistý.

A co kompatibilita?

Všechny moderní verze populárních prohlížečů, včetně IE9+, podporují více obrázků (můžete zkontrolovat například Caniuse).

Můžete také použít Modernizr k poskytování alternativních řešení pro prohlížeče, které nepodporují více pozadí. Jak napsal Chris Coyier ve svém příspěvku o pořadí vrstev při použití více pozadí, udělejte něco takového:

Multiplebgs body ( /* Úžasné vícenásobné BG deklarace, které překračují realitu a imsources chicks */ ) .no-multipgs body ( /* laaaaaame fallback */ )
Pokud se obáváte použití JS pro zajištění zpětné kompatibility, můžete jednoduše deklarovat pozadí dvakrát, i když to má také své nevýhody v podobě možného dvojitého načítání zdrojů (to závisí na implementaci zpracování css v konkrétním prohlížeči):

/* vícenásobná záloha bg */ pozadí: #000 url(...) ...; /* Úžasné vícenásobné deklarace BG, které překračují realitu a lákají kuřátka */ url na pozadí(...), url(...), url(...), #000 url(...);

Pokud jste již začali přemýšlet o Windows 8, mějte na paměti, že při vývoji aplikací ve stylu metra můžete použít více pozadí, protože používá stejný engine jako IE10.

P.s. K tématu: Nemohu si nevzpomenout na fenomenální článek o .

Štítky:

• css3
• více pozadí
• hranice a pozadí

Přidat štítky