background-clip

  • Adressname der Version: CSS/background-clip
  • Titel der Version: background-clip
  • ID der Version: 452513
  • Erstellt:
  • Autor: AickeSchulz
  • Aktuelle Version? Nein
  • Kommentar Added some browser compatibility.

Inhalt der Version

{{ CSSRef() }}

Ü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 {{ gecko_minversion_inline("2.0") }} 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 {{ gecko_minversion_inline("2.0") }} 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 {{ gecko_minversion_inline("2.0") }}
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:padding wenn overflow: hidden | auto | scroll festgelegt wurde.
  • Konqueror 3.5.4 unterstützt -khtml-background-clip.

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3 id=".C3.9Cbersicht">Übersicht</h3>
<p>Die <code>background-clip</code> Eigenschaft legt fest, ob ein Hintergrundbild oder eine Hintergrundfarbe auch unterhalb des <a href="/de/CSS/border" title="de/CSS/border">Elementrahmens</a> erweitert werden soll. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.<br />
  Die Eigenschaft <code>-moz-background-clip</code> wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.</p>
<div class="note">
  <strong>Hinweis</strong>: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne <code>-moz-</code>) im Stylesheet notieren. Siehe <a href="#Beispiele">Beispiele</a>.</div>
<p>Wenn kein <code>background-image</code> vorhanden ist, hat diese Eigenschaft nur einen sichtbaren Effekt, wenn der Rahmen über transparente oder teilweise transparente Bereiche verfügt (siehe <a href="/de/CSS/border-style" title="de/CSS/border-style">border-style</a>). Andernfalls sind nur die Effekte des Rahmens selbst zu sehen.</p>
<ul>
  <li>Standardwert: <code>border-box</code></li>
  <li>Anwendbar auf: alle Elemente</li>
  <li>Vererbbar: Nein</li>
  <li>Prozentwerte: Nein</li>
  <li>Medium: visuell</li>
  <li>berechneter Wert: wie festgelegt</li>
</ul>
<h3 id="Syntax">Syntax</h3>
<pre class="eval">
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) */
</pre>
<h3 id="Werte">Werte</h3>
<dl>
  <dt>
    border-box {{ gecko_minversion_inline("2.0") }} bzw. border <small>(Firefox 1.0-3.6)</small></dt>
  <dd>
    Standardwert.Der Hintergrund erstreckt sich bis zur äußeren Ecke des Rahmens (aber unterhalb des Rahmens auf der Z-Achse).</dd>
  <dt>
    padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding <small>(Firefox 1.0-3.6)</small></dt>
  <dd>
    Es wird kein Hintergrund unterhalb des Rahmens gezeichnet (der Hintergrund erstreckt sich bis zur äußeren Ecke des Innenabstands (padding).</dd>
  <dt>
    content-box {{ gecko_minversion_inline("2.0") }}</dt>
  <dd>
    Der Hintergrund wird innerhalb des Inhalts (content box) gezeichnet.</dd>
</dl>
<h3 id="Beispiele">Beispiele</h3>
<pre style="overflow:visible;border: 1em navy;border-style:dotted double;background:tomato;-moz-background-clip:padding;-webkit-background-clip:padding; background-clip:padding-box;">
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;&nbsp; /* Safari, Chrome */
           background-clip: padding-box;&nbsp; /* Firefox 4.0+, Opera */
}
</pre>
<h3 id="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Browser</th>
      <th>ab Version</th>
      <th>Unterstützung von</th>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>1.0</td>
      <td><code>background-clip:&nbsp; padding-box | border-box | content-box</code></td>
    </tr>
    <tr>
      <td rowspan="2">Firefox (Gecko)</td>
      <td>1.0-3.6 (1.2-1.9.2)</td>
      <td><code>-moz-background-clip: padding | border</code></td>
    </tr>
    <tr>
      <td>4.0 (2.0)</td>
      <td><code>background-clip:&nbsp; padding-box | border-box | content-box</code></td>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td>9.0</td>
      <td><code>background-clip:&nbsp; padding-box | border-box | content-box</code></td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>10.5</td>
      <td><code>background-clip:&nbsp; padding-box | border-box</code></td>
    </tr>
    <tr>
      <td>Safari (WebKit)</td>
      <td>3.0 (522)</td>
      <td><code>-webkit-background-clip:&nbsp; padding | border | content</code><br />
        <code>-webkit-background-clip:&nbsp; padding-box | border-box | content-box</code></td>
    </tr>
  </tbody>
</table>
<ul>
  <li>[*]: Der IE 7 (keine anderen IE-Versionen) verhält sich wie <code>background-clip:padding</code> wenn <code>overflow: hidden | auto | scroll</code> festgelegt wurde.</li>
  <li>Konqueror 3.5.4 unterstützt <code>-khtml-background-clip</code>.</li>
</ul>
<h3 id="Spezifikation">Spezifikation</h3>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-background-clip" lang="en">CSS 3 Backgrounds and Borders #background-clip</a></li>
  <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-clip" lang="en">CSS 3 Editor's Draft </a> (enthält <code>content-box</code>)</li>
</ul>
<h3 id="Siehe_auch">Siehe auch</h3>
<ul>
  <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li>
  <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li>
  <li><a href="/de/CSS/clip" title="de/CSS/clip"><code>clip</code></a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}</p>
Zu dieser Version zurücksetzen