Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

Lekce 16 - Pozadí elementů - obrázek, barva, ohraničení v CSS 3 Nové

V předchozí lekci, Úpravy a nastavení kurzorů v CSS3, jsme se dozvěděli, jak si za pomocí CSS3 vytvořit vlastní vzhled kurzoru.

Vítejte u další lekce ohledně nastavení v CSS 3, ve které si ukážeme, jak elementům nastavit určité pozadí. V této lekci se tedy naučíme následující:

Pozadí elementů
localhost

Vlastnost background

Skoro každému běžnému elementu na stránce lze nastavit nějakou vlastnost pozadí. Jedná se o pozadí veškerého prostoru, který element na stránce zabírá. V CSS3 můžeme v této vlastnosti definovat i více pozadí oddělených čárkou. Pozadí může mít několik vlastností:

  • background-color - Barva pozadí
  • background-position - Pozice pozadí
  • background-size - Velikost pozadí
  • background-repeat - Opakování pozadí
  • background-origin - Specifikuje k čemu se má vztahovat pozice pozadí
  • background-clip - Oříznutí pozadí
  • background-attachment - Přichycení pozadí
  • background-image - Obrázek nebo obrázky jako pozadí
  • background-blend-mode - Nastavení prolínání vrstev pozadí

Pokud chceme, můžeme všechna nastavení napsat v rámci syntaxe vlastnosti background:

background: color position/size repeat origin clip attachment image;

Na pořadí nezáleží, můžeme tak třeba vynechat např. vlastnost color aj. Např. kód:

background: url('tree.gif') 100px 150px/200px;

nastaví jako pozadí obrázek tree.gif, který bude posunut o 100px po ose y (zeshora) a o 150px po ose x (zleva). Obrázku taktéž nastavíme velikost 200px×200px.

Barva pozadí

Nyní si ukážeme, jak nastavit nějakému elementu barevné pozadí. Vytvoříme si tedy nějaké HTML elementy, které obarvíme:

<div>Červené pozadí</div>
<div>Zelené pozadí</div>
<div>Modré pozadí</div>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Každému přidělíme nějakou CSS třídu(.pozadi-cervene, .pozadi-zelene, .pozadi-modre), ve které poté nastavíme vlastnost background-color na red/green/blue.

<div class="pozadi-cervene">Červené pozadí</div>
<div class="pozadi-zelene">Zelené pozadí</div>
<div class="pozadi-modre">Modré pozadí</div>
.pozadi-cervene {
  background-color: red;
}

.pozadi-zelene {
  background-color: green;
}

.pozadi-modre {
  background-color: blue;
}

Výsledek bude vypadat nějak takto:

Pozadí elementů
localhost

Jak můžeme vidět, barva se nám nezmění pouze za textem, ale i na celém řádku. Pokaždé je to tedy pozadí celého elementu.

Oříznutí pozadí

Další vlastnost, kterou si ukážeme, je background-clip, neboli oříznutí pozadí. Díky němu lze nastavit, například jestli se má zbarvit i pozadí okrajů nebo nikoliv. Ve většině případů by to nebylo důležité, protože okraje jsou v popředí oprati pozadí. Dejme ale tomu, že chceme aby se náš okraj skládal z teček. Vytvoříme si další tři HTML elementy:

<div class="border-box">Pozadí za tečkami</div>
<div class="padding-box">Bez pozadí za tečkami</div>
<div class="content-box">Pozadí pouze pod obsahem elementu</div>

Každé třídě nastavíme tečkovaný okraj border: 5px dotted black;, vnitřní odsazení padding: 10px; a nějakou barvu background-color: yellow; (žlutá). Poté první třídě nastavíme background-clip: border-box;, druhé background-clip: padding-box; a třetí background-clip: content-box;:

 .border-box {
  border: 5px dotted black;
  padding: 10px;
  background-color: yellow;
  background-clip: border-box;
 }

.padding-box {
  border: 5px dotted black;
  padding: 10px;
  background-color: yellow;
  background-clip: padding-box;
 }

.content-box {
  border: 5px dotted black;
  padding: 10px;
  background-color: yellow;
  background-clip: content-box;
 }

A jak můžeme vidět, v prvním případě je nastaveno žluté pozadí i za tečkovaným okrajem, v druhém případě je všude kromě našeho okraje a v třetím případě je pouze pod textem, neboli obsahem elementu:

Pozadí elementů
localhost

Obrázek jako pozadí

Jako poslední si ještě ukážeme, že pozadí nemusí být pouze barevné. Jako pozadí se totiž dají nastavit i různé obrázky. Podporované formáty jsou .png, .jpg, .jpeg, .svg, .gif, .bmp, .dit a tak dále. To potom záleží podle toho jak chcete nadále s pozadím pracovat. Pokud to bude pozadí u elementu, který nijak nemění svou velikost, ať už je stránka otevřená kdekoliv, může to být jednoduchý .png nebo .jpg obrázek. Pokud ale bude element nastaven s proměnlivou velikostí, obrázky na pozadí se mohou zobrazovat nedostatečně nebo naopak nepřiměřeně velké. Jako příklad si tedy vytvoříme ještě jeden HTML element s CSS třídou .staticky:

<div class="staticky">Obrázek v pozadí</div>

V naší třídě .staticky nastavíme vlastnost background-image: url(''). Mezi uvozovky do url('') napíšeme název souboru obrázku. V souborech k lekci to bude tedy zapsáno následujícím způsobem background-image: url('tree.png'):

.staticky {
 background-image: url('tree.png');
}

V našem elementu ale nemáme žádný text, musíme mu tedy v třídě staticky nastavit ještě předdefinovanou velikost:

.staticky {
 background-image: url('tree.png');
 width: 250px;
 height: 250px;
}

Vznikne nám tedy element o velikosti 250px×250px s obrázkem nastaveným jako pozadí:

Pozadí elementů
pozadi-elementu.html

Bohužel námi vybraný obrázek je daleko větší, než 250px×250px pixelů, a tudíž je ho vidět jenom malá část. Nezapomínejme, že místo obyčejného obrázku lze nastavit jako pozadí i pohybující se GIF. Uděláme si tedy ještě jeden HTML element s novou CSS třídou .pohyblivy:

<div class="pohyblivy">Pohyblivý obrázek v pozadí</div>

Velikost width a height bude 100% velikost našeho obrázku, nastavíme tedy hodnotu na 400px×400px:

.pohyblivy {
 background-image: url('tree.gif');
 width: 400px;
 height: 400px;
}

Výsledek:

Pozadí elementů
localhost

Pokud něčemu nerozumíte, doporučujeme stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet :)

V další lekci, Pozadí elementů - velikost, pozice a přichycení v CSS 3, se naučíme, jak u pozadí elementů nastavit velikost, pozici, přichycení a případně opakování.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 8x (885.59 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS3

 

Předchozí článek
Úpravy a nastavení kurzorů v CSS3
Všechny články v sekci
CSS3 od A do Z
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (5)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!