HTML and CSS Reference
In-Depth Information
Syntax
mask-position-x:
length
|
percentage
| left | center | right
Example
<img src="example.jpg" style="-webkit-mask-image: url(mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position-x: 180px;">
Compatibility
No specification
Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is known as
-webkit-mask-position-x
.
mask-position-y
This property specifies the y-coordinate in the position of the mask.
Syntax
mask-position-y:
length
|
percentage
| top | center | bottom
Example
<img src="example.jpg" style="-webkit-mask-image: url(mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position-y: 160px;"
>
Compatibility
No specification
Chrome 2+, Safari 3.1+
Note
• In WebKit-based browsers this property is known as
-webkit-mask-position-y
.
mask-repeat
This property specifies how the mask image will repeat.
Syntax
mask-repeat: repeat | repeat-x | repeat-y | no-repeat
where the default is
repeat
.
Examples
<img src="tucker.jpg" style="-webkit-mask-image: url(star.png);
-webkit-mask-repeat: repeat-x;">
<img src="tucker.jpg" style="-webkit-mask-image: url(star.png);
-webkit-mask-repeat: no-repeat;">
