mozilla
Your Search Results

    -webkit-mask-image

    Non-standard
    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.

    Summary

    The -webkit-mask-image CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.

    Syntax

    -webkit-mask-image:  <mask-image>[, <mask-image>]*
    

    Where:

    <mask-image>
    <uri> | <gradient> | none

    Values

    <uri>
    The location of the image resource to be used as a mask image.
    <gradient>
    A -webkit-gradient function to be used as a mask image.
    none
    Used to specify that an element is to have no mask image.

    Examples

    body {
        -webkit-mask-image: url('images/mymask.png');
    }
    
    div {
        -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
    }
    
    p {
        -webkit-mask-image: none;
    }
    

    Notes

    If you specify multiple mask images, the resulting visible region is the combination of the visible regions of each individual mask.

    Browser compatibility

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support Not supported 1.0 Not supported Not supported 4.0
    Multiple mask images Not supported 1.0 Not supported Not supported 4.0
    Gradients Not supported 1.0-webkit Not supported Not supported 4.0-webkit
    SVG masks Not supported 8.0 Not supported Not supported 4.0
    Feature iOS Safari Opera Mini Opera Mobile Android Browser
    Basic support 3.2 Not supported Not supported 2.1
    Multiple mask images yes Not supported Not supported yes
    Gradients yes -webkit Not supported Not supported yes-webkit

    SVG masks

    yes

    Not supported

    Not supported

    yes

    Note: Since version 1.9.1 Gecko supports SVG filter effects, which you can use to apply masks to HTML content.

    See also

    -webkit-mask, -webkit-mask-origin, -webkit-mask-attachment,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat

    Document Tags and Contributors

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