mozilla
Your Search Results

    -webkit-mask-composite

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.

    Syntax

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

    Where:

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

    Values

    clear
    Overlapping pixels in the source mask image and the destination mask image are cleared.
    copy
    The source mask image replaces the destination mask image.
    source-over
    The source mask image is rendered over the destination mask image.
    source-in
    Overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mask image; all other pixels are cleared.
    source-out
    Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered.
    source-atop
    The pixels of the destination mask image are rendered. The pixels of the source mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the source mask image to have no effect.
    destination-over
    The destination mask image is rendered over the source mask image.
    destination-in
    Overlapping pixels in the source mask image and the destination mask image remain the pixels of the destination mask image; all other pixels are cleared.
    destination-out
    Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered.
    destination-atop
    The pixels of the source mask image are rendered. The pixels of the destination mask image are rendered only if they overlap a nontransparent portion of the destination mask image. This causes the destination mask image to have no effect.
    xor
    Overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque.

    Examples

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

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1.0 Not supported Not supported Not supported 4.0
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 2.1 Not supported Not supported Not supported 3.2

    See also

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

    Document Tags and Contributors

    Tags: 
    Contributors to this page: Sheppy, velvel53, barlow, kscarfone, teoli, berkerpeksag, grendel
    Last updated by: kscarfone,
    Hide Sidebar