CSS-Eigenschaft: background-clip, Kategorien: Hintergründe (allgemein), Backgrounds and Borders (CSS 3)
Art der Ausfüllung der Hintergrundfläche
Bestimmt, wie weit der Hintergrund des HTML-Elements ausgefüllt wird.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Art der Ausfüllung der Hintergrundfläche |
| border-box |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Hintergründe (allgemein), Backgrounds and Borders (CSS 3):
- background
- background-attachment
- Aktuelle Seite: background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
Folgendes ist beim Einsatz von background-clip zu beachten:
- Vor CSS3 haben Hintergrundfarben und -grafiken ein HTML-Element immer bis zum Rand ausgefüllt. Seit CSS3 kann die Fläche bestimmt werden, die ausgefüllt werden soll.
- Hintergründe können bis hinter dem Rahmen angezeigt werden. Diese werden allerdings nur sichtbar, falls für border einer der Werte dotted, dashed oder double gesetzt ist.
- Über content-box kann die Ausfüllung auf den eigentlichen Inhalt begrenzt werden. Das padding des Elements wird dann nicht ausgefüllt.
- Falls über background-image mehrere Grafiken hinterlegt sind, kann für jede Grafik auch eine eigene Ausfüllung definiert werden. Im Beispiel Nr. 6 sind das Verhalten und die Syntax zu sehen.
- Standardwert ist border-box, das bedeutet, ohne eine Angabe von background-clip füllt der Hintergrund immer die komplette Box einschließlich Rahmen aus.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu background-clip:
- W3C Spezifikation:
http://www.w3.org/TR/css3-background/#background-clip
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
background-attachment - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
background-color
Beispiele
HTML:
<div id="example-1">background-clip</div>CSS:
#example-1 {
background-color: #00ff00;
height: 100px;
border: 10px dotted black;
padding: 30px;
background-clip: border-box;
}
/* Diese Anweisung entspricht dem Standardverhalten. */Beispiel nur für: 
Beispiel Nr. 1 So sieht's aus:
background-clip
HTML:
<div id="example-2">background-clip</div>CSS:
#example-2 {
background-color: #00ff00;
height: 100px;
border: 10px dotted black;
padding: 30px;
background-clip: padding-box;
}
/* Über padding-box wird der Rahmen vom Hintergrund ausgespart. */Beispiel nur für:
Beispiel Nr. 2 So sieht's aus:
background-clip
HTML:
<div id="example-3">background-clip</div>CSS:
#example-3 {
background-color: #00ff00;
height: 100px;
border: 10px dotted black;
padding: 30px;
background-clip: content-box;
}
/* Über content-box wird weder Rahmen noch das Padding vom Hintergrund ausgefüllt. */Beispiel nur für:
Beispiel Nr. 3 So sieht's aus:
background-clip
HTML:
<div id="example-4">background-clip</div>CSS:
#example-4 {
background-color: #00ff00;
background-image: url('/img/ball.png');
height: 100px;
border: 10px dotted black;
padding: 30px;
background-clip: content-box;
}
/* Das Verhalten bezieht sich sowohl auf Hintergrundfarben als auch -grafiken.
Die rote Kugel hat einen transparenten Hintergrund. Von daher wird das grün sichtbar. */Beispiel nur für:
Beispiel Nr. 4 So sieht's aus:
background-clip
HTML:
<div id="example-5">background-clip</div>CSS:
#example-5 {
background-color: #00ff00;
background-image: url('/img/ball.png');
height: 100px;
border: 20px double yellow;
padding: 30px;
background-clip: border-box;
}
/* Hintergrundgrafiken reichen ebenfalls bis hinter den Rahmen. */Beispiel nur für:
Beispiel Nr. 5 So sieht's aus:
background-clip
HTML:
<div id="example-6">background-clip</div>CSS:
#example-6 {
background-image: url('/img/ball.png'), url('/img/ball-blau.png');
background-color: #00ff00;
height: 100px;
border: 10px dotted black;
padding: 30px;
background-clip:content-box, border-box;
}
/* Es können mehrere Hintergrundgrafiken eingesetzt und pro Grafik eine eigene Ausfüllung definiert werden. */Beispiel nur für:
Beispiel Nr. 6 So sieht's aus:
background-clip
HTML:
<div id="example-7">background-clip</div>CSS:
#example-7 {
background-color: #00ff00;
height: 100px;
border: 10px dotted black;
padding: 30px;
}
/* Ohne eine Angabe von background-clip greift der Standardwert border-box. Die Ausfüllung reicht bis unter den Rahmen. */Beispiel nur für:
Beispiel Nr. 7 So sieht's aus:
background-clip
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!