From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/-webkit-mask-image/index.html | 156 +++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 files/es/web/css/-webkit-mask-image/index.html (limited to 'files/es/web/css/-webkit-mask-image') diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/-webkit-mask-image/index.html new file mode 100644 index 0000000000..17fc6d5e1e --- /dev/null +++ b/files/es/web/css/-webkit-mask-image/index.html @@ -0,0 +1,156 @@ +--- +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 +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-image 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.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
-webkit-mask-image: url(images/mymask.png);
+-webkit-mask-image: url(images/foo.png), url(images/bar.png);
+-webkit-mask-image: none;
+
+ +

Valores

+ +
+
<uri>
+
La localización del recurso imagen que será utilizado como imagen de máscara.
+
<gradient>
+
La función webkit-gradient que será usada como imagen de máscara.
+
none
+
Usado para especificar si un elemento no tiene imagen de máscara.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
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;
+}
+
+ +

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.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Múltiples imágenes de máscara{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Gradientes{{CompatNo}}1.0{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}
Máscaras SVG{{CompatNo}}8.0[1]{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Soporte básico3.2{{CompatNo}}{{CompatNo}}2.1
Múltiples imágenes de máscara{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
Gradientes{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Máscaras SVG{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}

-- cgit v1.2.3-54-g00ecf