CSS pozadí

Obsah

Zobrazit obsah

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

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

style="color:crimson">barva pozadí
style="color:crimson">obrázek na pozadí
style="color:crimson">opakování na pozadí
style="color:crimson">příloha-pozadí
style="color:crimson">pozice na pozadí
style="color:crimson">pozadí (zkrácená vlastnost)

CSS barva pozadí

Vlastnost background-color určuje barvu pozadí prvku.

Příklad

Barva pozadí stránky je nastavena takto:

body {
  background-color: lightblue;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

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)“

Podívejte se na Hodnoty barev CSS pro kompletní seznam možných hodnot barev.

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

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ší:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Boxes</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
  <h1>opacity 0.1</h1>
</div>

<div class="second">
  <h1>opacity 0.3</h1>
</div>

<div class="third">
  <h1>opacity 0.6</h1>
</div>

<div>
  <h1>opacity 1 (default)</h1>
</div>

</body>
</html>

Poznámka: Při použití vlastnosti opacity k přidání průhlednosti na pozadí prvku, všechny jeho podřízené prvky zdědí 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í a ne pro text:

100% opacity

60% opacity

30% opacity

10% opacity

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 kanálem alfa (RGBA) - který určuje krytí pro barvu.

Hodnota barvy RGBA je určena pomocí: rgba(červená, zelená, modrá, alfa). The Parametr alpha 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 */
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Boxes 2</h1>

<p>Result with opacity:</p>

<div style="opacity:0.1;">
  <h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
  <h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>opacity 1</h1>
</div>

<p>Result with rgba():</p>

<div class="first">
  <h1>10% opacity</h1>
</div>

<div class="second">
  <h1>30% opacity</h1>
</div>

<div class="third">
  <h1>60% opacity</h1>
</div>

<div>
  <h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

Vlastnost Barva pozadí CSS

background-color: Nastavuje barvu pozadí prvku