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-image
vlastnosti.
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í background
vlastnosti zkratky.
Následující příklad používá background
zkrá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-size
umožň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-size
jsou contain
a cover
.
Klíčové contain
slovo 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é cover
slovo 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í contain
a 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-size
vlastnost 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-origin
urč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-origin
vlastnost:
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-clip
urč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-clip
vlastnost:
Příklad
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
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) |