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.

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

• [*]: 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

• CSS 3 Backgrounds and Borders #background-clip
• CSS 3 Editor's Draft (enthält content-box)

Siehe auch

• background, background-attachment, background-color, background-image, background-origin, background-position, background-repeat, background-size
• -moz-background-inline-policy
• clip