Obrázek na pozadí - Triky CSS

Anonim

background-imageNemovitost v CSS se týká grafiky (např PNG, SVG, JPG.webp, GIF, WebP) nebo přechod na pozadí prvku.

S CSS můžete zahrnout dva různé typy obrázků: běžné obrázky a přechody.

snímky

Použití obrázku na pozadí je velmi jednoduché:

body ( background: url(sweettexture.jpg.webp); )

url()Hodnota umožňuje zadat cestu k souboru do obrazu, a to se zobrazí jako pozadí pro tento prvek.

Můžete také nastavit datový URI pro url(). Vypadá to takto:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Tato technika odstraní jeden požadavek HTTP, což je dobrá věc. Existuje však řada nevýhod, takže než začnete vyměňovat všechny své obrázky, nezapomeňte zvážit všechny výhody a nevýhody datových identifikátorů URI.

Můžete také použít background-imagek sprite obrázky, což je další užitečná metoda pro snížení požadavků HTTP.

Přechody

Další možností při použití pozadí je říct prohlížeči, aby vytvořil přechod. Tady je superduper jednoduchý příklad lineárního přechodu:

body ( background: linear-gradient(black, white); )

Můžete také použít radiální přechody:

body ( background: radial-gradient(circle, black, white); )

Z technického hlediska jsou přechody jen další formou obrázku na pozadí. Rozdíl je v tom, že prohlížeč vytvoří obrázek za vás. Zde je návod, jak je napsat: CSS3 Gradient Syntax

Výše uvedený příklad používá pouze jeden přechod, ale můžete také vrstvit více přechodů na sebe. Pomocí této techniky můžete vytvořit několik úžasných vzorů.

Nastavení záložní barvy

Pokud se obrázek na pozadí nepodaří načíst nebo se vaše pozadí s přechodem zobrazí v prohlížeči, který nepodporuje přechody, bude prohlížeč hledat barvu pozadí jako záložní. Svou záložní barvu můžete určit takto:

body ( background: url(sweettexture.jpg.webp) blue; )

Více obrázků na pozadí

Pro pozadí můžete použít více obrázků nebo jejich kombinaci a přechody. Více obrázků na pozadí je nyní dobře podporováno (všechny moderní prohlížeče a IE9 + pro grafické obrázky, IE10 + pro přechody).

Pokud používáte více obrázků na pozadí, mějte na paměti, že existuje poněkud proti-intuitivní pořadí stohování. Nejprve uveďte obrázek, který by měl být vpředu, a obrázek, který by měl být vzadu jako poslední:

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

Pokud používáte více obrázků na pozadí, budete často muset nastavit více hodnot na pozadí, aby bylo vše na správném místě. Pokud chcete použít backgroundzkratku, můžete nastavit hodnoty pro každý obrázek zvlášť. Vaše zkratka bude vypadat asi takto (všimněte si čárky oddělující první obrázek a jeho hodnoty od druhého obrázku a jeho hodnot):

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Počet obrázků na pozadí, který můžete nastavit, není nijak omezen a můžete dělat skvělé věci, jako je animace obrázků na pozadí. Na blogu Davida Walsha je dobrý příklad několika obrázků na pozadí s animací.

Ukázka

Podívejte se na obrázek na pozadí pera od CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

  • příloha na pozadí
  • klip na pozadí
  • barva pozadí
  • původ pozadí
  • pozice na pozadí
  • opakování pozadí
  • velikost pozadí

Další zdroje

  • Specifikace CSS3
  • MDN
  • Dokonalé obrázky na pozadí celé stránky
  • Zvládnutí přechodů CSS (Slideeck)

Podpora prohlížeče

Pravidelné obrázky fungují všude a více obrázků funguje v moderních prohlížečích a IE9 +. Zde je podpora pro přechody:

Chrome Safari Firefox Opera TJ Android iOS
10+ 5,1+ 3,6+ 12,1+ 10+ 4+ 5,1+