HTML and CSS Reference
In-Depth Information
Compatibility
No specification
Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is
-webkit-mask-image
.
mask-origin
This property specifies how the position of the mask should be calculated by setting the
origin relative to different locations within an element's box.
Syntax
mask-origin: border | content | padding
where the mask will be anchored to the upper-left corner of the element's border, content, or
padding based on the specified option.
Example
<div style="height: 100px; width: 200px;
background-color: red;
padding: 20px;
border: 5px dashed black;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-mask-origin: padding;
-webkit-mask-clip: padding;" >
</div>
Compatibility
No specification
Chrome 3+, Safari 4+
Notes
• In WebKit-based browsers this property is
-webkit-mask-origin
.
• If
mask-origin
is set to
padding
and
mask-clip
is set to
border
, it will act as if
a mask with alpha value 0 is over the border, therefore rendering it invisible.
mask-position
This property specifies the position of the mask.
Syntax
mask-position:
xpos
ypos
