HTML and CSS Reference
In-Depth Information
Compatibility
No specification
Safari 3.1+
Note
• In WebKit-based browsers this property is
-webkit-mask
.
mask-attachment
This property specifies whether the mask should scroll or stay fixed when the page is scrolled.
Syntax
mask-attachment: fixed | scroll
where the mask will scroll with the page on
scroll
and will not move on
fixed
.
Example
<img src="main.jpg" style="-webkit-mask-image: -webkit-gradient(linear,
left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
-webkit-mask-attachment: fixed;">
Compatibility
No specification
Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is
-webkit-mask-attachment
.
mask-box-image
This property specifies an image to be used as a mask over the border box of an element.
Syntax
mask-box-image: [url() | function()] top right bottom left x_repeat y_repeat
where
url
is the location of the image,
function
is a function that generates an image,
top
,
right
,
bottom
, and
left
specify the distances from the edges of the image, and
x_repeat
and
y_repeat
can be set to
repeat
,
stretch
, or
round
to indicate how the image is
altered to fit the dimensions.
Example
<img src="main.jpg" style="-webkit-mask-box-image: url(mask.png) 10 50 50
10 stretch;">
Compatibility
No specification
Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is
-webkit-mask-box-image
.
