-webkit-mask-position

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Sumario

La propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.

Valor inicial0% 0%
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Heredableno
Percentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)
Valor calculadoConsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
Animation typea repeatable list

Síntaxis

mask-position = 
<position>#

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<length-percentage> =
<length> |
<percentage>

Valores

Acepta uno o dos valores. Se permiten valores negativos para <percentage> y <length>.

  • Si sólo se especifica un valor, el segundo valor se supone que es center.
  • El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave).
<percentage>

Con un par de valores 0% 0%, (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14% a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14% a lo largo y el 84% del área del relleno.

<length>

Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.

top

Equivalente al 0% para la posición vertical.

Equivalente al 100% para la posición horizontal.

bottom

Equivalente al 100% para la posición vertical.

left

Equivalente al 0% para la posición horizontal.

center

Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.

Ejemplos

css
.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position: bottom right;
}

.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position: 25%;
}

Especificaciones

No forma parte de ninguna especificación.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambien