CSS-Hintergründe


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die CSS-Hintergrundeigenschaften werden zum Hinzufügen von Hintergrundeffekten verwendet für Elemente.


In diesen Kapiteln erfahren Sie mehr über die folgenden CSS-Hintergrundeigenschaften:

  • style="color:crimson">Hintergrundfarbe

  • style="color:crimson">Hintergrundbild

  • style="color:crimson">Hintergrundwiederholung

  • style="color:crimson">Hintergrundanhang

  • style="color:crimson">Hintergrundposition

  • style="color:crimson">Hintergrund (Kurzschrifteigenschaft)


CSS-Hintergrundfarbe

Die Eigenschaft background-color gibt die Hintergrundfarbe eines Elements an.

Beispiel

Die Hintergrundfarbe einer Seite wird wie folgt eingestellt:

body {
  background-color: lightblue;
}

Probieren Sie es selbst aus →

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


Mit CSS wird eine Farbe am häufigsten angegeben durch:

  • ein gültiger Farbname - wie „rot“

  • ein HEX-Wert - wie „#ff0000“

  • ein RGB-Wert - wie „rgb(255,0,0)“

Sehen Sie sich die CSS-Farbwerte für eine vollständige Übersicht an Liste möglicher Farbwerte.


Andere Elemente

Sie können die Hintergrundfarbe für jedes HTML-Element festlegen:

Beispiel

Hier haben die Elemente <h1>, <p> und <div> unterschiedliche Hintergrundfarben:

h1 {
  background-color: green;
}

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

Probieren Sie es selbst aus →

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




Deckkraft/Transparenz

Die Eigenschaft opacity gibt die Opazität/Transparenz eines Elements an. Der Wert kann zwischen 0,0 und 1,0 liegen. Je niedriger der Wert, desto transparenter:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Beispiel

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

Probieren Sie es selbst aus →

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


Hinweis: Wenn Sie die Eigenschaft opacity verwenden, um dem Hintergrund eines Elements und aller seiner untergeordneten Elemente Transparenz hinzuzufügen erben die gleiche Transparenz. Dies kann dazu führen, dass der Text in einem vollständig transparenten Element schwer lesbar ist.


Transparenz mit RGBA

Wenn Sie keine Deckkraft auf untergeordnete Elemente anwenden möchten, wie in unserem Beispiel oben, verwenden Sie RGBA-Farbwerte. Das folgende Beispiel legt die Deckkraft für die Hintergrundfarbe und nicht für den Text fest:

100% opacity

60% opacity

30% opacity

10% opacity

In unserem Kapitel „CSS-Farben“ haben Sie gelernt, dass Sie RGB als Farbwert verwenden können. Zusätzlich zu RGB, Sie können einen RGB-Farbwert mit einem Alpha-Kanal (RGBA) verwenden, der die Deckkraft einer Farbe angibt.

Ein RGBA-Farbwert wird angegeben mit: rgba(red, green, blue, alpha). Der Der Parameter Alpha ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).

Tipp: Weitere Informationen zu RGBA-Farben finden Sie in unserem Kapitel „CSS-Farben“.

Beispiel

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

Probieren Sie es selbst aus →

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



Die CSS-Eigenschaft „Hintergrundfarbe“.

background-color

Legt die Hintergrundfarbe eines Elements fest