CSS/Tutorials/Boxmodell/background-clip

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Boxmodell
Wechseln zu: Navigation, Suche

Mit der Eigenschaft background-clip können Sie bestimmen, dass die Hintergrundeigenschaften nur für bestimmte Bereiche der Elementbox gelten. [1] [2]

Browserunterstützung
caniuse.com

Erlaubt sind dabei die folgenden Angaben:

  • border-box, (Standardwert) Hintergrund wird im Inhalts- und padding-Bereich sowie unter den Rahmen dargestellt,
  • content-box, Hintergrund wird nur im Inhaltsbereich dargestellt
  • padding-box, Hintergrund wird im Inhalts- und padding-Bereich dargestellt

Für ein tieferes Verständnis wird das Studium des Artikels zum Boxmodell empfohlen.

Anwendungsbeispiel ansehen …
div {
        width: 20em;
        margin: 1em;
        outline: thin solid black; 
        border: 1em dashed red; 
        padding: 1em;
        background-color: gold;
}
#one   { background-clip: border-box; }
#two   { background-clip: padding-box; }
#three { background-clip: content-box; }

In diesem Beispiel erhalten die Div-Elemente alle eine dünne schwarze Außenlinie, einen breiten gestrichelten Rahmen sowie einen goldfarbenen Hintergrund, um die verschiedenen Werte für background-clip veranschaulichen zu können.


Quellen

  1. ↑ W3C: background-clip property
  2. ↑ css-tricks.com: The `background-clip` Property and its Use Cases
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Boxmodell/background-clip&oldid=90016“