CSS/Eigenschaften/Hintergrundfarben und -bilder/background-clip

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Das folgende Bild zeigt den grundsätzlichen Aufbau einer Box. Für ein tieferes Verständnis wird das Studium des Artikels zum Boxmodell empfohlen.

Darstellung des CSS Box-Modells

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>background-color</title>
    <style>
      div {
        width: 20em;
        margin: 1em;
        outline: 1px 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; }
    </style>
  </head>
  <body>
    <h1>Hintergrundbereich festlegen</h1>
    <div id="one">background-clip: border-box;</div>
    <div id="two">background-clip: padding-box;</div>
    <div id="three">background-clip: content-box;</div>
  </body>
</html>
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.

Mit background-clip legen Sie fest, welcher Bereich der Elementbox von der Darstellung des Hintergrundes betroffen ist. Erlaubt sind dabei die folgenden Angaben:

  • content-box, Hintergrund wird nur im Inhaltsbereich dargestellt
  • padding-box, Hintergrund wird im Inhalts- und padding-Bereich dargestellt
  • border-box, Hintergrund wird im Inhalts- und padding-Bereich sowie unter den Rahmen dargestellt, Voreinstellung
Beachten Sie: Safari unterstützt die Eigenschaft auch in der Version 9 nur mit dem Browserpräfix -webkit-.

Weblinks[Bearbeiten]