aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/-webkit-mask-composite/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/-webkit-mask-composite/index.html
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/css/-webkit-mask-composite/index.html')
-rw-r--r--files/es/web/css/-webkit-mask-composite/index.html121
1 files changed, 121 insertions, 0 deletions
diff --git a/files/es/web/css/-webkit-mask-composite/index.html b/files/es/web/css/-webkit-mask-composite/index.html
new file mode 100644
index 0000000000..c8a3666fee
--- /dev/null
+++ b/files/es/web/css/-webkit-mask-composite/index.html
@@ -0,0 +1,121 @@
+---
+title: '-webkit-mask-composite'
+slug: Web/CSS/-webkit-mask-composite
+tags:
+ - CSS
+translation_of: Web/CSS/-webkit-mask-composite
+---
+<p>{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p>La propiedad <code style="font-size: 14px; font-style: normal; line-height: 1.5;">-webkit-mask-composite</code> especifica la forma en la que múltiples imágenes de máscara son compuestas para ser aplicadas al mismo elemento. Son compuestas en el orden en el que son declaradas en la propiedad {{ Cssxref("-webkit-mask-image") }}.</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}: source-over</li>
+ <li>Se aplica a : todos los elementos</li>
+ <li>{{ Xref_cssinherited() }}: no</li>
+ <li>Media: {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}: tal y como se especifica.</li>
+</ul>
+
+<h2 id="Síntaxis">Síntaxis</h2>
+
+<pre class="eval">-webkit-mask-composite: &lt;composite-style&gt;[, &lt;composite-style&gt;]*
+</pre>
+
+<p>Donde:</p>
+
+<dl>
+ <dt>&lt;composite-style&gt;</dt>
+ <dd><code>clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor</code></dd>
+</dl>
+
+<h2 id="Valores">Valores</h2>
+
+<dl>
+ <dt>clear</dt>
+ <dd>Los píxeles coincidentes en la imagen origen y destino son borrados.</dd>
+ <dt>copy</dt>
+ <dd>La imagen de máscara origen reemplaza la imagen de máscara destino.</dd>
+ <dt>source-over</dt>
+ <dd>La imagen de máscara origen se dibuja sobre la imagen de máscara destino.</dd>
+ <dt>source-in</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino son reemplazados por los píxeles de la imagen origen; los demás son borrados.</dd>
+ <dt>source-out</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino son borrados; todos los demás píxeles de la imagen de máscara origen son dibujados.</dd>
+ <dt>source-atop</dt>
+ <dd>Se dibujan los píxeles de la imagen de máscara destino. Los de la imagen de máscara destino sólo son dibujados si están sobre una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara origen no tengo efecto alguno.</dd>
+ <dt>destination-over</dt>
+ <dd>Se dibuja la imagen de máscara destino sobre la de origen.</dd>
+ <dt>destination-in</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino permanecen; los demás son borrados.</dd>
+ <dt>destination-out</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino se borran; se dibuja todos los demás píxeles de la imagen de máscara origen.</dd>
+ <dt>destination-atop</dt>
+ <dd>Se dibujan Los píxeles de la imagen de máscara origen. Los de la imagen de máscara destino sólo se dibujaran si coinciden con una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara destino no tenga efecto.</dd>
+ <dt>xor</dt>
+ <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino se convierten en totalmente transparentes y ambos con totalmente opacos.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: css">.example {
+ -webkit-mask-image: url(mask1.png), url('mask2.png');
+ -webkit-mask-composite: xor, source-over;
+}
+</pre>
+
+<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>{{ CompatNo() }}</td>
+ <td>{{ CompatNo() }}</td>
+ <td>{{ CompatNo() }}</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-clip") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }}</p>