background-clip

Übersicht

Die background-clip Eigenschaft legt fest, ob ein Hintergrundbild oder eine Hintergrundfarbe auch unterhalb des Elementrahmens erweitert werden soll. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.
Die Eigenschaft -moz-background-clip wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.

Hinweis: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne -moz-) im Stylesheet notieren. Siehe Beispiele.

Wenn kein background-image vorhanden ist, hat diese Eigenschaft nur einen sichtbaren Effekt, wenn der Rahmen über transparente oder teilweise transparente Bereiche verfügt (siehe border-style). Andernfalls sind nur die Effekte des Rahmens selbst zu sehen.

  • Standardwert: border-box
  • Anwendbar auf: alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt

Syntax

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

-moz-background-clip:  [border | padding][, [border | padding]]*  /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */

Werte

border-box bzw. border (Firefox 1.0-3.6)
Standardwert.Der Hintergrund erstreckt sich bis zur äußeren Ecke des Rahmens (aber unterhalb des Rahmens auf der Z-Achse).
padding-box bzw. padding (Firefox 1.0-3.6)
Es wird kein Hintergrund unterhalb des Rahmens gezeichnet (der Hintergrund erstreckt sich bis zur äußeren Ecke des Innenabstands (padding).
content-box
Der Hintergrund wird innerhalb des Inhalts (content box) gezeichnet.

Beispiele

pre {
   border: 1em navy;
   border-style: dotted double;
   background: tomato;
   /* Der rote Hintergrund wird nicht unter den Rahmen wandern */
   -moz-background-clip: padding;         /* Firefox 1.0-3.6 */
   -webkit-background-clip: padding-box;  /* Safari, Chrome */
           background-clip: padding-box;  /* Firefox 4.0+, Opera */
}

Browser Kompatibilität

Browser ab Version Unterstützung von
Chrome 1.0 background-clip:  padding-box | border-box | content-box
Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-clip: padding | border
4.0 (2.0) background-clip:  padding-box | border-box | content-box
Internet Explorer 9.0 background-clip:  padding-box | border-box | content-box
Opera 10.5 background-clip:  padding-box | border-box
Safari (WebKit) 3.0 (522) -webkit-background-clip:  padding | border | content
-webkit-background-clip:  padding-box | border-box | content-box
  • [*]: Der IE 7 (keine anderen IE-Versionen) verhält sich wie background-clip:padding wenn overflow: hidden | auto | scroll festgelegt wurde.
  • Konqueror 3.5.4 unterstützt -khtml-background-clip.

Spezifikation

Siehe auch