mask-size

Definition

The mask-size CSS property is used to specify the size of a mask image applied to an element. It allows you to control the size of the mask image, independent of the size of the element it is applied to.

Examples

In this example, we apply a mask image to a div element and set the mask-size property to cover, which means the mask image is scaled proportionally to cover the entire element:

<div class="masked"></div>
.masked {
  width: 200px;
  height: 200px;
  background-color: red;
  mask-image: url('mask-image.png');
  mask-size: cover;
}

In this example, we apply a mask image to a div element and set the mask-size property to contain, which means the mask image is scaled proportionally to fit within the element, with any excess mask image being hidden:

<div class="masked"></div>
.masked {
  width: 200px;
  height: 200px;
  background-color: red;
  mask-image: url('mask-image.png');
  mask-size: contain;
}

In this example, we apply a mask image to a div element and set the mask-size property to 50% 50%, which means the mask image is scaled to 50% of its original size in both the horizontal and vertical directions:

<div class="masked"></div>
.masked {
  width: 200px;
  height: 200px;
  background-color: red;
  mask-image: url('mask-image.png');
  mask-size: 50% 50%;
}

Values

Best Practices

• Choose the appropriate value for your use case: The mask-size property allows you to control the size of the mask image. Choose the appropriate value based on your use case and the effect you are trying to achieve.
• Test in different browsers: The mask-size property is supported in most modern browsers, but it's still a good idea to test your code in different browsers to ensure cross-browser compatibility.
• Use a high-quality mask image: The effectiveness of the mask image depends on its quality. Make sure the mask image is high-quality, with sharp edges and good contrast.
• Experiment with different values: The mask-size property is just one of many properties you can use to achieve masking effects. Experiment with different values to achieve the effect you want.
• Consider performance: Masking can be computationally expensive, especially when using large images or complex masks. Consider the performance implications of using the mask-size property, and optimize your code accordingly.
• Use fallbacks for unsupported browsers: If you are using the mask-size property and other masking properties, make sure to provide fallbacks for browsers that do not support these features. One approach is to use a solid color as a fallback.

Browser Compatibility