-webkit-mask-composite

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.

La propiedad -webkit-mask-composite especifica la forma en la que múltiples imágenes de máscara son compuestas para ser aplicadas al mismo elemento. Son compuestas en el orden en el que son declaradas en la propiedad -webkit-mask-image.

Síntaxis

-webkit-mask-composite: <composite-style>[, <composite-style>]*

Donde:

<composite-style>
clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor

Valores

clear
Los píxeles coincidentes en la imagen origen y destino son borrados.
copy
La imagen de máscara origen reemplaza la imagen de máscara destino.
source-over
La imagen de máscara origen se dibuja sobre la imagen de máscara destino.
source-in
Los píxeles coincidentes en las imágenes de máscara origen y destino son reemplazados por los píxeles de la imagen origen; los demás son borrados.
source-out
Los píxeles coincidentes en las imágenes de máscara origen y destino son borrados; todos los demás píxeles de la imagen de máscara origen son dibujados.
source-atop
Se dibujan los píxeles de la imagen de máscara destino. Los de la imagen de máscara destino sólo son dibujados si están sobre una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara origen no tengo efecto alguno.
destination-over
Se dibuja la imagen de máscara destino sobre la de origen.
destination-in
Los píxeles coincidentes en las imágenes de máscara origen y destino permanecen; los demás son borrados.
destination-out
Los píxeles coincidentes en las imágenes de máscara origen y destino se borran; se dibuja todos los demás píxeles de la imagen de máscara origen.
destination-atop
Se dibujan Los píxeles de la imagen de máscara origen. Los de la imagen de máscara destino sólo se dibujaran si coinciden con una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara destino no tenga efecto.
xor
Los píxeles coincidentes en las imágenes de máscara origen y destino se convierten en totalmente transparentes y ambos con totalmente opacos.

Ejemplos

.example {
    -webkit-mask-image: url(mask1.png), url('mask2.png');
    -webkit-mask-composite: xor, source-over;
}

Compatibilidad con los distintos navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 No support No support No support 4.0
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 2.1 No support No support No support 3.2

Ver además

-webkit-mask, -webkit-mask-clip-webkit-mask-origin, -webkit-mask-box-image, -webkit-mask-attachment,-webkit-mask-image

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,