mozilla
Your Search Results

    -webkit-mask-origin

    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-origin CSS property determines the origin of a mask image. The value of the -webkit-mask-position property is interpreted relative to the value of this property. This property does not apply when -webkit-mask-attachment is fixed.

    Syntax

    -webkit-mask-origin: [padding | border | content][, [border | padding | content]]*
    

    Values

     
    padding
    Default value. The mask image position is relative to the padding. (For single boxes "0 0" is the upper left corner of the padding edge, "100% 100%" is the lower right corner.)
    border
    The mask image position is relative to the border.
    content
    The mask image is relative to the content.

    Examples

    .example {
        border: 10px double;
        padding: 10px;
        -webkit-mask-image: url('mask.png');
    
        /* The mask image will be inside the padding */
        -webkit-mask-origin: content;
    }
    
    div {
        -webkit-mask-image: url('mask1.png'), url('mask2.png');
        -webkit-mask-origin: padding, content;
    }
    

    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 ? ? ? 3.2

    See also

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

    Document Tags and Contributors

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