Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: background-clip
KurzbeschreibungWerteStandardwertKategorieHinweis
Art der Ausfüllung der Hintergrundfläche
  • border-box
  • padding-box
  • content-box
border-box
Allgemein:
Hintergründe
CSS 3:
Backgrounds and Borders
Neu in CSS 3
 

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.
Browserunterstützung von background-clip
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
tj

Weiterführende Informationen zu background-clip:



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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 8.299 sec.

Browser-Marktanteile