CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS více pozadí


V této kapitole se naučíte, jak přidat více obrázků na pozadí k jednomu prvku.

Dozvíte se také o následujících vlastnostech:

  • background-size
  • background-origin
  • background-clip

CSS více pozadí

CSS umožňuje přidat více obrázků na pozadí pro prvek prostřednictvím background-imagevlastnosti.

Různé obrázky na pozadí jsou odděleny čárkami a obrázky jsou naskládány na sebe, kde je první obrázek nejblíže k divákovi.

Následující příklad má dva obrázky na pozadí, první obrázek je květina (zarovnána dole a vpravo) a druhý obrázek je papírové pozadí (zarovnáno do levého horního rohu):

Příklad

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Více obrázků pozadí lze zadat buď pomocí jednotlivých vlastností pozadí (jak je uvedeno výše), nebo pomocí backgroundvlastnosti zkratky.

Následující příklad používá backgroundzkrácenou vlastnost (stejný výsledek jako výše uvedený příklad):

Příklad

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}


Velikost pozadí CSS

Vlastnost CSS background-sizeumožňuje určit velikost obrázků na pozadí.

Velikost lze zadat v délkách, procentech nebo pomocí jednoho ze dvou klíčových slov: obsahovat nebo překrýt.

Následující příklad změní velikost obrázku na pozadí na mnohem menší než původní obrázek (pomocí pixelů):

Děkuji Mu za Bolest

Samotná bolest je láska

Proto je na nejmenším přijít, koho naše běžná praxe snese, aby využil důsledků

Zde je kód:

Příklad

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Dvě další možné hodnoty pro background-sizejsou contain a cover.

Klíčové containslovo změní měřítko obrázku na pozadí tak, aby byl co největší (ale jeho šířka i výška se musí vejít do oblasti obsahu). Jako takové, v závislosti na proporcích obrázku na pozadí a oblasti umístění pozadí, mohou existovat některé oblasti pozadí, které obrázek pozadí nepokryje.

Klíčové coverslovo změní měřítko obrázku na pozadí tak, aby byla oblast obsahu zcela pokryta obrázkem pozadí (jeho šířka i výška jsou stejné nebo přesahují oblast obsahu). Některé části obrázku na pozadí proto nemusí být v oblasti umístění pozadí viditelné.

Následující příklad ilustruje použití containa cover:

Příklad

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Definujte velikosti více obrázků na pozadí

Tato background-sizevlastnost také přijímá více hodnot pro velikost pozadí (pomocí seznamu odděleného čárkami), když pracujete s více pozadími.

V následujícím příkladu jsou specifikovány tři obrázky na pozadí s různou hodnotou velikosti pozadí pro každý obrázek:

Příklad

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Obrázek na pozadí v plné velikosti

Nyní chceme mít na webu obrázek na pozadí, který vždy pokryje celé okno prohlížeče.

Požadavky jsou následující:

  • Vyplňte celou stránku obrázkem (bez mezer)
  • Změňte velikost obrázku podle potřeby
  • Obrázek uprostřed stránky
  • Nevytvářejte posuvníky

Následující příklad ukazuje, jak to udělat; Použijte prvek <html> (prvek <html> má vždy alespoň výšku okna prohlížeče). Poté na něj nastavte pevné a vycentrované pozadí. Poté upravte jeho velikost pomocí vlastnosti background-size:

Příklad

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

Obrázek hrdiny

Můžete také použít různé vlastnosti pozadí na <div> k vytvoření obrázku hrdiny (velký obrázek s textem) a umístit jej na požadované místo.

Příklad

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

Vlastnost CSS pozadí

Vlastnost CSS background-originurčuje, kde je umístěn obrázek na pozadí.

Vlastnost nabývá tří různých hodnot:

  • border-box - obrázek na pozadí začíná od levého horního rohu okraje
  • padding-box - (výchozí) obrázek na pozadí začíná od levého horního rohu okraje výplně
  • content-box - obrázek na pozadí začíná od levého horního rohu obsahu

Následující příklad ilustruje background-originvlastnost:

Příklad

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Vlastnost klipu pozadí CSS

Vlastnost CSS background-clipurčuje oblast malování pozadí.

Vlastnost nabývá tří různých hodnot:

  • border-box - (výchozí) pozadí je namalováno k vnějšímu okraji okraje
  • vycpávka - pozadí je namalováno k vnějšímu okraji vycpávky
  • content-box - pozadí je vymalováno uvnitř obsahového pole

Následující příklad ilustruje background-clipvlastnost:

Příklad

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Otestujte se pomocí cvičení

Cvičení:

Přidejte dva obrázky na pozadí k prvku <body>.

img1.gifa img2.gif.

Ujistěte se, že img2.gifje zobrazeno v horní části img1.gif.

<style>
body {
  background-image: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


Pokročilé vlastnosti pozadí CSS

Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)