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-color
urč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 opacity
urč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í opacity
vlastnosti 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 */
}