No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Si se especificado -webkit-mask-image
, -webkit-mask-clip
determina el comportamiento de recorte (clipping) de la imagen de máscara.
Valor inicial | border-box |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements |
Heredable | no |
Valor calculado | como se especifica |
Animation type | discrete |
Síntaxis
[ <geometry-box> | no-clip ]#where
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
donde:
- <clip-style>
border | padding | content | text
Valores
- border
Si se ha especificado border
, la máscara de imagen se extiende hasta el borde del elemento.- padding
- Si se ha especificado
padding
, la imagen de máscara de extiendo hasta el padding (relleno) del elemento. - content
- Si se ha espeficiado c
ontent
, la imagen de máscara se recorta al tamaño del contenido del elemento. - text
- Si se ha especificado
text
, la imagen de máscara de recorta al tamaño del texto del elemento.
Ejemplo
div {
-webkit-mask-image: url('images/mask.png');
-webkit-mask-clip: padding;
}
Compatibilidad con los distintos navegadores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | Sin soporte | Sin soporte | Sin soporte | 4.0 |
Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Soporte básico | 2.1 | Sin soporte | Sin soporte | Sin soporte | 3.2 |