diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/css/mask-image/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip |
unslug es: move
Diffstat (limited to 'files/es/web/css/mask-image/index.html')
-rw-r--r-- | files/es/web/css/mask-image/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/es/web/css/mask-image/index.html b/files/es/web/css/mask-image/index.html new file mode 100644 index 0000000000..60434d3e6a --- /dev/null +++ b/files/es/web/css/mask-image/index.html @@ -0,0 +1,157 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-image +translation_of_original: Web/CSS/-webkit-mask-image +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">La propiedad CSS </font>-webkit-mask-image</code> establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">-webkit-mask-image: url(images/mymask.png); +-webkit-mask-image: url(images/foo.png), url(images/bar.png); +-webkit-mask-image: none; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><uri></dt> + <dd>La localización del recurso imagen que será utilizado como imagen de máscara.</dd> + <dt><gradient></dt> + <dd>La función <code>webkit-gradient</code> que será usada como imagen de máscara.</dd> + <dt>none</dt> + <dd>Usado para especificar si un elemento no tiene imagen de máscara.</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">body { + -webkit-mask-image: url('images/mymask.png'); +} + +div { + -webkit-mask-image: url('images/foo.png'), url('images/bar.png'); +} + +p { + -webkit-mask-image: none; +} +</pre> + +<p>Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.</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ísticas</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Múltiples imágenes de máscara</td> + <td>{{CompatNo}}</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Gradientes</td> + <td>{{CompatNo}}</td> + <td>1.0{{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Máscaras SVG</td> + <td>{{CompatNo}}</td> + <td>8.0<sup>[1]</sup></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>Feature</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>3.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>2.1</td> + </tr> + <tr> + <td>Múltiples imágenes de máscara</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Gradientes</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Máscaras SVG</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta <a href="/es/docs/Applying_SVG_effects_to_HTML_content#Example_Masking">Efectos de filtro SVG</a>, que se pueden usar para aplicar máscaras a contenido HTML.</p> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}</p> |