From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/web/css/mask/index.html | 125 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/es/web/css/mask/index.html (limited to 'files/es/web/css/mask') diff --git a/files/es/web/css/mask/index.html b/files/es/web/css/mask/index.html new file mode 100644 index 0000000000..50dd997bb0 --- /dev/null +++ b/files/es/web/css/mask/index.html @@ -0,0 +1,125 @@ +--- +title: '-webkit-mask' +slug: Web/CSS/-webkit-mask +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/mask +translation_of_original: Web/CSS/-webkit-mask +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask  puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-webkit-mask: none;
+
+/* Valores de imágene */
+-webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
+-webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
+-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
+
+/* Valores combinados */
+-webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
+-webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
+-webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
+-webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
+-webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
+
+/* Valores globales */
+-webkit-mask: inherit;
+-webkit-mask: initial;
+-webkit-mask: unset;
+
+ +

Valores

+ +
+
mask-image
+
Requierido.Ver {{Cssxref("-webkit-mask-image")}}.
+
mask-repeat
+
Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}.
+
mask-attachment
+
Opcional Ver {{Cssxref("-webkit-mask-attachment")}}.
+
mask-position
+
Opcional. Ver {{Cssxref("-webkit-mask-position")}}.
+
mask-origin
+
Opcional. Ver {{Cssxref("-webkit-mask-origin")}}.
+
mask-clip
+
Opcional Ver {{Cssxref("-webkit-mask-clip")}}.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.example {
+  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf