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
|
---
title: '-webkit-mask-repeat'
slug: Web/CSS/mask-repeat
tags:
- CSS
- No estandar
- Propiedad CSS
- Referencia
- Web
translation_of: Web/CSS/mask-repeat
translation_of_original: Web/CSS/-webkit-mask-repeat
original_slug: Web/CSS/-webkit-mask-repeat
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<h2 id="Resumen">Resumen</h2>
<p><code><font face="Open Sans, Arial, sans-serif">La propiedad </font>-webkit-mask-repeat</code> especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.</p>
<p>{{cssinfo}}</p>
<h2 id="Síntaxis">Síntaxis</h2>
<pre class="brush:css">/* Palabras clave de valor únicas */
-webkit-mask-repeat: repeat;
-webkit-mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-y;
-webkit-mask-repeat: no-repeat;
/* Palabras clave de valor mútiple */
-webkit-mask-repeat: repeat, repeat-x, no-repeat;
/* Valores globlaes */
-webkit-mask-repeat: inherit;
-webkit-mask-repeat: initial;
-webkit-mask-repeat: unset;
</pre>
<h2 id="Valores">Valores</h2>
<dl>
<dt>repeat</dt>
<dd>La máscara de imagen se repite tanto vertical como horizontalmente.</dd>
<dt>repeat-x</dt>
<dd>La imagen de máscara de repite sólo horizontalmente.</dd>
<dt>repeat-y</dt>
<dd>La imagen de máscara de repite sólo verticalemente.</dd>
<dt>no-repeat</dt>
<dd>La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.</dd>
</dl>
<h3 id="Síntaxis_Formal">Síntaxis Formal</h3>
{{csssyntax}}
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: css">.exampleone {
-webkit-mask-image: url('mask.png');
-webkit-mask-repeat: repeat-x;
}
.exampletwo {
-webkit-mask-image: url('mask.png');
-webkit-mask-repeat: 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>Se puede especificar, seperados por comas, un <code><repeat-style></code> para cada una de las imágenes de máscara:</p>
<pre class="brush: css">.examplethree {
-webkit-mask-image: url('mask1.png'), url('mask2.png');
-webkit-mask-repeat: repeat-x, repeat-y;
}
</pre>
<p>Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.</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>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>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>2.1</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ver_además">Ver además</h2>
<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}</p>
|
