---
title: '-webkit-mask-repeat-x'
slug: Web/CSS/-webkit-mask-repeat-x
translation_of: Web/CSS/-webkit-mask-repeat-x
---
<div>{{CSSRef}}{{Non-standard_header}}</div>

<p> </p>

<p>Die Eigenschaft <code>-webkit-mask-repeat-x</code> gibt an, ob und wie ein Maskenbild horizontal wiederholt wird.</p>

<pre class="brush:css no-line-numbers">/* Keyword values */
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

/* Multiple values */
-webkit-mask-repeat-x: repeat, no-repeat, space;

/* Global values */
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
-webkit-mask-repeat-x: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<h3 id="Werte">Werte</h3>

<dl>
 <dt>repeat</dt>
 <dd>Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.</dd>
 <dt>no-repeat</dt>
 <dd>Das Maskenbild wird nicht wiederholt, nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht angezeigt.</dd>
 <dt>space</dt>
 <dd>Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild sind an jeder Seite des Elements angeheftet und Leerräume sind gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.</dd>
 <dt>round</dt>
 <dd>Wenn der erlaubte Platz vergrößert wird, werden sich die wiederholten Bilder dehnen (ohne Lücken zu hinterlassen), bis Platz für einen weiteren Platz vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260 Pixeln, das dreimal wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300 Pixel breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimieren.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiel">Beispiel</h2>

<pre class="brush: css">.exampleone {
  -webkit-mask-image: url('mask.png');
  -webkit-mask-repeat-x: repeat;
}

.exampletwo {
  -webkit-mask-image: url('mask.png');
  -webkit-mask-repeat-x: no-repeat;
}
</pre>

<h3 id="Support_für_mehrere_Bildmasken">Support für mehrere Bildmasken</h3>

<p>Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <code>&lt;repeat-style&gt; </code>angeben:</p>

<pre class="brush: css">.examplethree {
  -webkit-mask-image: url('mask1.png'), url('mask2.png');
  -webkit-mask-repeat-x: repeat, space;
}
</pre>

<p>Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.</p>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.</p>

<h2 id="Sehenswert">Sehenswert</h2>

<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}</p>