-webkit-mask-origin

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.

La propiedad CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad -webkit-mask-position se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.

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

mask-origin = 
  <coord-box>#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Valores

padding: Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas "0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
border: La posición de la imagen de máscara es relativa al borde.
content: La posición de la imagen de máscara es relativa al contenido.

Ejemplos

css

.example {
  border: 10px double;
  padding: 10px;
  -webkit-mask-image: url("mask.png");

  /* La imagen de máscara estará dentro del padding */
  -webkit-mask-origin: content;
}

css

div {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-origin: padding, content;
}

Compatibilidad con navegadores

BCD tables only load in the browser

Ver además

-webkit-mask, -webkit-mask-box-image, -webkit-mask-attachment, -webkit-mask-image,-webkit-mask-composite, -webkit-mask-repeat, -webkit-mask-clip