1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: '-webkit-mask-repeat-x'
slug: Web/CSS/-webkit-mask-repeat-x
tags:
- CSS
- Máscara CSS
- NeedsBrowserCompatibility
- NeedsMobileBrowserCompatibility
- No estandar
- Propiedad CSS
- Referencia
translation_of: Web/CSS/-webkit-mask-repeat-x
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <code>-webkit-mask-repeat-x</code> especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera horizontal.</p>
<p>{{cssinfo}}</p>
<h2 id="Síntaxis">Síntaxis</h2>
<pre class="brush:css">/* Palabras Clave Valor */
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;
/* Múltiples valores */
-webkit-mask-repeat-x: repeat, no-repeat, space;
/* Valores globales */
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
-webkit-mask-repeat-x: unset;
</pre>
<h2 id="Valores">Valores</h2>
<dl>
<dt>repeat</dt>
<dd>La imagen de máscara se repite tanto horizontal como verticalmente.</dd>
<dt>no-repeat</dt>
<dd>La imagen de máscara no se repite; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.</dd>
<dt>space</dt>
<dd>La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas a ambos lados del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.</dd>
<dt>round</dt>
<dd>Al aumentar el espacio la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una achura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una anchura de 300px y, entonces, se añadirá otra que se encogerá hasta 225px.</dd>
</dl>
<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Ejemplos">Ejemplos</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="Soporte_para_múltiples_imágenes_de_máscara">Soporte para múltiples imágenes de máscara</h3>
<p>Es posible especificar un <code><repeat-style></code> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:</p>
<pre class="brush: css">.examplethree {
-webkit-mask-image: url('mask1.png'), url('mask2.png');
-webkit-mask-repeat-x: repeat, space;
}
</pre>
<p>Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo el orden que se ha establecido.</p>
<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</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>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.</p>
<h2 id="Ver_además">Ver además</h2>
<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}</p>
|
