mozilla

Version 486925 von background-color

  • Adressname der Version: CSS/background-color
  • Titel der Version: background-color
  • ID der Version: 486925
  • Erstellt:
  • Autor: SJW
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

{{CSSRef()}}
{{outdated()}}

Übersicht:

Die background-color Eigenschaft legt die Hintergrundfarbe eines Elementes fest.

  • Standardwert transparent
  • Anwendbar auf Alle Elemente
  • Vererbbar Nein
  • Prozentwerte Nein
  • Medium visuell
  • berechneter Wert wie festgelegt

Syntax

background-color:  <Farbe> | transparent | inherit

Werte

<Farbe>
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
transparent
Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt (Standardwert).
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Ergebnis Quelltext
Blaue Hintergrundfarbe als Farbname
background-color: powderblue
Blaue Hintergrundfarbe als hexadezimaler RGB-Wert
background-color: #b0e0e6
Blaue Hintergrundfarbe als dezimaler RGB-Wert
background-color: rgb(176, 224, 230)
Blaue Hintergrundfarbe als prozentualer RGB-Wert
background-color: rgb(68%, 88%, 90%)
Blaue Hintergrundfarbe als RGBa-Wert
background-color: rgba(176, 224, 230, 1)
Blaue Hintergrundfarbe als HSL-Wert
background-color: hsl(187, 52%, 80%)
Blaue Hintergrundfarbe als HSLa-Wert
background-color: hsla(187, 52%, 80%, 1)

Browser Kompatibilität

Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Spezifikation

Siehe auch

Quelltext der Version

<div>
 {{CSSRef()}}</div>
<div>
 {{outdated()}}</div>
<h2 id=".C3.9Cbersicht.3A">Übersicht:</h2>
<p>Die <code>background-color</code> Eigenschaft legt die Hintergrundfarbe eines Elementes fest.</p>
<ul class="cssprop">
 <li><dfn>Standardwert</dfn> <code>transparent</code></li>
 <li><dfn>Anwendbar auf</dfn> Alle Elemente</li>
 <li><dfn>Vererbbar</dfn> Nein</li>
 <li><dfn>Prozentwerte</dfn> Nein</li>
 <li><dfn>Medium</dfn> visuell</li>
 <li><dfn>berechneter Wert</dfn> wie festgelegt</li>
</ul>
<h3 id="Syntax">Syntax</h3>
<pre class="eval">
background-color:  &lt;Farbe&gt; | transparent | inherit
</pre>
<h3 id="Werte">Werte</h3>
<dl>
 <dt>
  &lt;Farbe&gt;</dt>
 <dd>
  <a href="/de/docs/CSS/Farben" title="de/docs/CSS/Farben">Farbangabe</a> [ Hexadezimalwert, Farbname, Systemfarbe, <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> oder <code>hlsa()</code> ]</dd>
 <dt>
  transparent</dt>
 <dd>
  Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt (Standardwert).</dd>
 <dt>
  inherit</dt>
 <dd>
  Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h3 id="Beispiele">Beispiele</h3>
<table class="standard-table" style="width: 66%;">
 <tbody>
  <tr>
   <td class="header" width="50%">Ergebnis</td>
   <td class="header" width="50">Quelltext</td>
  </tr>
  <tr>
   <td style="background-color: powderblue;">Blaue Hintergrundfarbe als Farbname</td>
   <td>
    <pre>
background-color: powderblue</pre>
   </td>
  </tr>
  <tr>
   <td style="background-color: rgb(176, 224, 230);">Blaue Hintergrundfarbe als hexadezimaler RGB-Wert</td>
   <td>
    <pre>
background-color: #b0e0e6</pre>
   </td>
  </tr>
  <tr>
   <td style="background-color: rgb(176, 224, 230);">Blaue Hintergrundfarbe als dezimaler RGB-Wert</td>
   <td>
    <pre>
background-color: rgb(176, 224, 230)</pre>
   </td>
  </tr>
  <tr>
   <td style="background-color: rgb(173, 224, 230);">Blaue Hintergrundfarbe als prozentualer RGB-Wert</td>
   <td>
    <pre>
background-color: rgb(68%, 88%, 90%)</pre>
   </td>
  </tr>
  <tr>
   <td style="background-color: rgba(176, 224, 230, 1);">Blaue Hintergrundfarbe als RGBa-Wert</td>
   <td>
    <pre>
background-color: rgba(176, 224, 230, 1)</pre>
   </td>
  </tr>
  <tr>
   <td style="background-color: hsl(188, 53%, 80%);">Blaue Hintergrundfarbe als HSL-Wert</td>
   <td>
    <pre>
background-color: hsl(187, 52%, 80%)</pre>
   </td>
  </tr>
  <tr>
   <td style="background-color: hsla(188, 53%, 80%, 1);">Blaue Hintergrundfarbe als HSLa-Wert</td>
   <td>
    <pre>
background-color: hsla(187, 52%, 80%, 1)</pre>
   </td>
  </tr>
 </tbody>
</table>
<h3 id="Browser_Kompatibilit.C3.A4t">Browser <span>Kompatibilität</span></h3>
<table class="standard-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>ab Version</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>Firefox (Gecko)</td>
   <td>1.0 (1.0)</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
  <tr>
   <td>Safari (WebKit)</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
<h3 id="Spezifikation">Spezifikation</h3>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-color" lang="en">CSS 3 Background and Borders #background-color</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color" lang="en">CSS 2.1 Colors and Backgrounds #background-color</a></li>
</ul>
<h3 id="Siehe_auch">Siehe auch</h3>
<ul>
 <li><a href="/de/docs/CSS/background" title="de/docs/CSS/background"><code>background</code></a>, <a href="/de/docs/CSS/background-attachment" title="de/docs/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/docs/CSS/background-clip" title="de/docs/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/docs/CSS/background-image" title="de/docs/CSS/background-image"><code>background-image</code></a>, <a href="/de/docs/CSS/background-origin" title="de/docs/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/docs/CSS/background-position" title="de/docs/CSS/background-position"><code>background-position</code></a>, <a href="/de/docs/CSS/background-repeat" title="de/docs/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/docs/CSS/background-size" title="de/docs/CSS/background-size"><code>background-size</code></a></li>
 <li><a href="/de/docs/CSS/-moz-background-inline-policy" title="de/docs/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
</ul>
Zu dieser Version zurücksetzen