Ü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:paddingwennoverflow: hidden | auto | scrollfestgelegt 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)