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 pozadí


Vlastnosti pozadí CSS se používají k přidání efektů pozadí pro prvky.


V těchto kapitolách se dozvíte o následujících vlastnostech pozadí CSS:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background (vlastnost zkrácené volby)

CSS barva pozadí

Vlastnost background-colorurčuje barvu pozadí prvku.

Příklad

Barva pozadí stránky je nastavena takto:

body {
  background-color: lightblue;
}

U CSS je barva nejčastěji určena:

  • platný název barvy – například „červená“
  • HEX hodnotu – například „#ff0000“
  • hodnota RGB – jako „rgb(255,0,0)“

Úplný seznam možných hodnot barev naleznete v části Hodnoty barev CSS .


Jiné prvky

Můžete nastavit barvu pozadí pro libovolné prvky HTML:

Příklad

Zde budou mít prvky <h1>, <p> a <div> různé barvy pozadí: 

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Neprůhlednost / Průhlednost

Vlastnost opacityurčuje neprůhlednost/průhlednost prvku. Může nabývat hodnoty od 0,0 do 1,0. Čím nižší hodnota, tím transparentnější:

neprůhlednost 1

neprůhlednost 0,6

neprůhlednost 0,3

neprůhlednost 0,1

Příklad

div {
  background-color: green;
  opacity: 0.3;
}

Poznámka: Při použití opacityvlastnosti k přidání průhlednosti na pozadí prvku zdědí všechny jeho podřízené prvky stejnou průhlednost. To může způsobit, že text uvnitř plně průhledného prvku bude obtížně čitelný.


Transparentnost pomocí RGBA

Pokud nechcete použít neprůhlednost na podřízené prvky, jako v našem příkladu výše, použijte hodnoty barev RGBA . Následující příklad nastavuje neprůhlednost pro barvu pozadí, nikoli pro text:

100% neprůhlednost

60% neprůhlednost

30% neprůhlednost

10% neprůhlednost

Z naší kapitoly o barvách CSS jste se dozvěděli , že jako hodnotu barvy můžete použít RGB. Kromě RGB můžete použít hodnotu barvy RGB s alfa kanálem (RGB A ) – který určuje krytí pro barvu.

Hodnota barvy RGBA je specifikována pomocí: rgba (červená, zelená, modrá, alfa ). Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).

Tip: Více o barvách RGBA se dozvíte v naší kapitole o barvách CSS .

Příklad

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}