diff options
Diffstat (limited to 'files/de/web/css/-webkit-mask-origin/index.html')
-rw-r--r-- | files/de/web/css/-webkit-mask-origin/index.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/files/de/web/css/-webkit-mask-origin/index.html b/files/de/web/css/-webkit-mask-origin/index.html new file mode 100644 index 0000000000..21f3b18534 --- /dev/null +++ b/files/de/web/css/-webkit-mask-origin/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referenz +translation_of: Web/CSS/mask-origin +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Die <code>-webkit-mask-origin</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der {{cssxref("-webkit-mask-position")}} Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn <code>-webkit-mask-attachment</code> <code>fixed</code> ist.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Werte">Werte</h2> + +<dl> + <dt>padding</dt> + <dd>Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist <code>"0 0</code>" die linke obere Ecke des Randes des Innenabstands, "<code>100% 100%</code>" ist die untere rechte Ecke.)</dd> + <dt>border</dt> + <dd>Die Position des Maskenbildes ist relativ zum Rand.</dd> + <dt>content</dt> + <dd>Das Maskenbild ist relativ zum Inhalt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush: css">.example { + border: 10px double; + padding: 10px; + -webkit-mask-image: url('mask.png'); + + /* Das Maskenbild ist innerhalb des Innenabstands. */ + -webkit-mask-origin: content; +} +</pre> + +<pre class="brush: css">div { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-origin: padding, content; +} +</pre> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Merkmal</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Unterstützung</td> + <td>2.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}</p> |