Mask-Origin is a CSS property that defines the origin of the mask positioning. It is used in conjunction with the mask-image property to create a mask effect on an element. The mask-origin property specifies where the mask image is positioned relative to the element's border box.
The mask-origin property can take four values: border-box, padding-box, content-box, and fill-box. The default value is border-box. Let's take a closer look at each value:
Let's take a look at some code examples to see how the mask-origin property works:
In this example, we have an image that we want to mask with a circle. We set the mask-image property to the circle image, and the mask-origin property to border-box. This means that the circle image will be positioned relative to the border box of the image.
<div class="image">
<img src="image.jpg" alt="Image">
</div>
.image {
width: 300px;
height: 300px;
border-radius: 50%;
mask-image: url(circle.png);
mask-origin: border-box;
}
The result of this code will be an image that is masked with a circle:
In this example, we have a div that we want to mask with a gradient. We set the mask-image property to the gradient, and the mask-origin property to padding-box. This means that the gradient will be positioned relative to the padding box of the div.
<div class="box"></div>
.box {
width: 300px;
height: 300px;
padding: 50px;
background: #fff;
mask-image: linear-gradient(to bottom, transparent, black);
mask-origin: padding-box;
}
The result of this code will be a div that is masked with a gradient:
In this example, we have a div that we want to mask with an image. We set the mask-image property to the image, and the mask-origin property to content-box. This means that the image will be positioned relative to the content box of the div.
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, velit eget ultrices ultricies, elit elit bibendum elit, vel bibendum elit elit eget elit.</p>
</div>
.box {
width: 300px;
height: 300px;
padding: 50px;
background: #fff;
mask-image: url(mask.png);
mask-origin: content-box;
}
p {
margin: 0;
}
The result of this code will be a div that is masked with an image:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, velit eget ultrices ultricies, elit elit bibendum elit, vel bibendum elit elit eget elit.
In this example, we have a div that we want to mask with an image. We set the mask-image property to the image, and the mask-origin property to fill-box. This means that the image will be stretched to fill the entire div, and will be positioned relative to the border box of the div.
<div class="box"></div>
.box {
width: 300px;
height: 300px;
background: #fff;
mask-image: url(mask.png);
mask-origin: fill-box;
}
The result of this code will be a div that is masked with an image:
As you can see, the mask-origin property is a powerful tool for creating mask effects on elements. By using different values for the mask-origin property, you can position the mask image in different ways, and create a wide variety of mask effects.
The mask-origin property is a CSS property that defines the origin of the mask positioning. It is used in conjunction with the mask-image property to create a mask effect on an element. The mask-origin property can take four values: border-box, padding-box, content-box, and fill-box. By using different values for the mask-origin property, you can position the mask image in different ways, and create a wide variety of mask effects.