aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/css/background-clip
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:15 -0500
commit4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch)
treed4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/css/background-clip
parent33058f2b292b3a581333bdfb21b8f671898c5060 (diff)
downloadtranslated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2
translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip
initial commit
Diffstat (limited to 'files/de/web/css/background-clip')
-rw-r--r--files/de/web/css/background-clip/index.html110
1 files changed, 110 insertions, 0 deletions
diff --git a/files/de/web/css/background-clip/index.html b/files/de/web/css/background-clip/index.html
new file mode 100644
index 0000000000..c627b66ce2
--- /dev/null
+++ b/files/de/web/css/background-clip/index.html
@@ -0,0 +1,110 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+ - CSS
+ - CSS Referenz
+translation_of: Web/CSS/background-clip
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Übersicht">Übersicht</h2>
+<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>
+<h2 id="Syntax">Syntax</h2>
+<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>
+<h2 id="Werte">Werte</h2>
+<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>
+<h2 id="Beispiele">Beispiele</h2>
+<pre style="overflow: visible; border: 1em navy; border-style: dotted double; background: tomato; 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;  /* Safari, Chrome */
+ background-clip: padding-box;  /* Firefox 4.0+, Opera */
+}
+</pre>
+<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
+<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:  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:  padding-box | border-box | content-box</code></td>
+ </tr>
+ <tr>
+ <td>Internet Explorer</td>
+ <td>9.0</td>
+ <td><code>background-clip:  padding-box | border-box | content-box</code></td>
+ </tr>
+ <tr>
+ <td>Opera</td>
+ <td>10.5</td>
+ <td><code>background-clip:  padding-box | border-box</code></td>
+ </tr>
+ <tr>
+ <td>Safari (WebKit)</td>
+ <td>3.0 (522)</td>
+ <td><code>-webkit-background-clip:  padding | border | content</code><br>
+ <code>-webkit-background-clip:  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>
+<h2 id="Spezifikation">Spezifikation</h2>
+<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>
+<h2 id="Siehe_auch">Siehe auch</h2>
+<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>