CSS hátterek

Tartalomjegyzék

Tartalomjegyzék megjelenítése

A CSS háttértulajdonságai háttéreffektusok hozzáadására szolgálnak elemekhez.

Ezekben a fejezetekben a következő CSS-háttértulajdonságokat ismerheti meg:

style="color:crimson">háttérszín
style="color:crimson">háttér-kép
style="color:crimson">background-repeat
style="color:crimson">háttérmelléklet
style="color:crimson">háttérpozíció
style="color:crimson">háttér (rövid tulajdonság)

CSS háttérszín

A background-color tulajdonság egy elem háttérszínét határozza meg.

Példa

Az oldal háttérszíne a következőképpen van beállítva:

body {
  background-color: lightblue;
}

Próbálja ki Ön is →

<!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>

A CSS-ben a színt leggyakrabban a következők határozzák meg:

érvényes színnév - például "piros"
HEX érték - például "#ff0000"
egy RGB-érték - például "rgb(255,0,0)"

Nézze meg a CSS színértékeket a teljességért lehetséges színértékek listája.

Egyéb elemek

Bármely HTML-elemhez beállíthatja a háttérszínt:

Példa

Itt a <h1>, <p> és <div> elemek háttérszíne eltérő lesz:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}
p {
  background-color: 
yellow;
}

Próbálja ki Ön is →

<!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>

Átlátszatlanság/Átlátszóság

Az átlátszatlanság tulajdonság egy elem átlátszatlanságát/átlátszóságát határozza meg. 0,0 és 1,0 közötti értéket vehet fel. Minél alacsonyabb az érték, annál átláthatóbb:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Példa

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

Próbálja ki Ön is →

<!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>

Megjegyzés: Ha az átlátszatlanság tulajdonságot használja egy elem hátterének átlátszóságának növelésére, az összes alárendelt eleme ugyanazt az átlátszóságot öröklik. Ez nehezen olvashatóvá teheti a teljesen átlátszó elemen belüli szöveget.

Átlátszóság RGBA használatával

Ha nem szeretne átlátszatlanságot alkalmazni a gyermekelemekre, mint a fenti példánkban, használja az RGBA színértékeket. A következő példa a háttérszín átlátszatlanságát állítja be, nem a szöveget:

100% opacity

60% opacity

30% opacity

10% opacity

A CSS Színek fejezetünkből megtanulta, hogy színértékként használhatja az RGB-t. Az RGB mellett használhat RGB színértéket egy alfa csatornával (RGBA) - ez határozza meg a szín átlátszatlanságát.

Az RGBA színérték a következőkkel van megadva: rgba(piros, zöld, kék, alpha). A Az alpha paraméter egy 0,0 (teljesen átlátszó) és 1,0 (teljesen átlátszatlan) közötti szám.

Tipp: Az RGBA színekről a CSS-színek című fejezetben tudhat meg többet.

Példa

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

Próbálja ki Ön is →

<!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>

A CSS háttérszín tulajdonság

background-color: Beállítja egy elem háttérszínét