CSS - -webkit-mask-box-image
Example
CSS
Copy Code
.exampleone { -webkit-mask-box-image: url('mask.png'); } .exampletwo { -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round; }
Syntax
CSS
Copy Code
-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
Where:
- <mask-box-image>
<uri>
| <gradient> | none- <top> <right> <bottom> <left>
<length> | <percentage>
- <x-repeat> <y-repeat>
repeat | stretch | round
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 a border box is to have no mask image.
- <length>
- The size of the mask image's offset. See
<length>
for possible units. - <percentage>
- The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).
- repeat
- The mask image is repeated as many times as is necessary to span the border box. May include a partial image if the mask image does not divide evenly into the border box.
- stretch
- The mask image is stretched to contain the border box exactly.
- round
- The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.
Description
-webkit-mask-box-image
sets the mask image for an element's border box.
- Initial value: none
- Applies to: all elements
- Inherited: no
- Media:
visual
- Computed value: as specified
See Also
-webkit-mask
, -webkit-mask-origin
, -webkit-mask-attachment
,-webkit-mask-clip
,-webkit-mask-image
,-webkit-mask-composite
,-webkit-mask-repeat
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | No support | No support | No support | 4.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | No support | No support | No support | 3.2 |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/-webkit-mask-box-image