CSS mask-size property

Description

CSS mask-size property defines the size of mask image on the mask painting area.

Syntax

mask-size : contain | cover | auto | +ve length | +ve percentage

Property values

autoDefault

The size of mask image is automatically calculated.

mask-size: auto;

contain

The image is rescaled to the largest size such that both sides of the image fit inside the mask painting area while preserving the aspect ratio.

mask-size: contain;

cover

The image is rescaled to the smallest size such that it covers the mask painting area completely while preserving the aspect ratio.

mask-size: cover;

+ve length

We specify fixed length for the mask image size.

mask-size: 20px;

+ve percentage

It represents the image size as the percentage of mask painting area.

30% means the mask image occupies the 30% of element. And three images can fill the painting area of element with this size.

mask-size: 30%;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?

 
×

Ctrl+D