CSS Masking - mask-origin Property

CSS mask-origin property defines the origin of the mask image.

This property provides the mask positioning area for elements displayed as a single box, which means, it specifies the origin position of an image determined by the mask-image CSS property.

For elements displayed as multiple boxes (e.g., inline boxes on multiple lines or boxes spanning several pages), the mask-origin property specifies which boxes are affected by box-decoration-break to determine the mask positioning area.

Possible Values

  • content-box − Sets the origin of the mask image relative to the outer edge of the content box.

  • padding-box − Sets the origin of the mask image relative to the outer edge of the padding box.

  • border-box − Sets the origin of the mask image relative to the outer edge of the border box.

  • fill-box − Sets the origin of the mask image relative to the object bounding box.

  • stroke-box − Sets the origin of the mask image relative to the stroke bounding box.

  • view-box − The nearest SVG viewport is considered as a reference box. SVG elements with a viewBox attribute have their content placed at the origin of the coordinate system defined by the viewBox, and the size or dimensions of the reference box is set to the width and height specified in the viewBox attribute.

Applies to

All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements.

Syntax

 mask-origin: content-box;
 mask-origin: padding-box;
 mask-origin: border-box;
 mask-origin: fill-box;
 mask-origin: stroke-box;
 mask-origin: view-box;

CSS mask-origin - content-box

The following example demonstrates that the -webkit-mask-origin: content-box property sets the origin of the mask image with the content box of the element −

<html>
<head>
<style>
   .box {
      max-width: 280px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 200px;
      height: 200px;
      border: 20px solid red;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-position: top left;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 70px 70px;
      -webkit-mask-origin: content-box;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="mask-container">
         <img src="images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>

CSS mask-origin - padding-box

The following example demonstrates that the -webkit-mask-origin: padding-box property sets the origin of the mask image with the padding box of the element −

<html>
<head>
<style>
   .box {
      max-width: 280px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 200px;
      height: 200px;
      border: 20px solid red;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-position: top left;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 70px 70px;
      -webkit-mask-origin: padding-box;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="mask-container">
         <img src="images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>

CSS mask-origin - border-box

The following example demonstrates that the -webkit-mask-origin: border-box property sets the origin of the mask image with the border box of the element −

<html>
<head>
<style>
   .box {
      max-width: 280px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 200px;
      height: 200px;
      border: 20px solid red;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-position: top left;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 70px 70px;
      -webkit-mask-origin: border-box;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="mask-container">
         <img src="images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>

CSS mask-origin - fill-box

The following example demonstrates that the -webkit-mask-origin: fill-box property sets the origin of the mask image relative to the entire box, including any padding −

<html>
<head>
<style>
   .box {
      max-width: 240px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 200px;
      height: 200px;
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-position: top left;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 70px 70px;
      -webkit-mask-origin: fill-box;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="mask-container">
         <img src="images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>

CSS mask-origin - stroke-box

The following example demonstrates that the -webkit-mask-origin: stroke-box property sets the origin of the mask image relative to the stroke bounding box, including any padding and border −

<html>
<head>
<style>
   .box {
      max-width: 280px;
      border: 3px solid blue;
   }
   .mask-container {
      background-color: gold;
      display: block;
      padding: 20px;
      width: 200px;
      height: 200px;
      border: 20px solid red;
      
      -webkit-mask-image: url(images/heart.png);
      -webkit-mask-position: top left;
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: 70px 70px;
      -webkit-mask-origin: stroke-box;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="mask-container">
         <img src="images/pink-flower.jpg" alt="pink flower" width="100%">
      </div>
   </div>
</body>
</html>
Advertisements