CSS mask-origin property

Description

CSS mask-origin property specifies the position of mask image with respect to different components of box model i.e. we define a point where we start measuring for the mask position.

Syntax

mask-origin : border-box | padding-box | content-box

Property values

padding-boxDefault: The mask image is positioned relative to the padding box.; mask-origin: padding-box;
Try it
border-box: The mask image is positioned relative to the border box.; mask-origin: border-box;
Try it
content-box: The mask image is positioned relative to the content box.; mask-origin: content-box;
Try it

Applicable to

It applies to all elements

Preview

Code

CSS

.element{
width:100%;
height:100px;
background:green;
border:10px solid red;
padding:10px;
-webkit-mask-image:url(img/web4college.png);
-webkit-mask-repeat:repeat;
color:white;
}

HTML

<div class="element">
 The image may be positioned with respect to any of the box area i.e. border, padding, and area box.
 </div>

CSS3 Properties

Description

Syntax

Property values

Applicable to