This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The mask-size
CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.
/* Keywords syntax */ mask-size: cover; mask-size: contain; /* One-value syntax */ /* the width of the image (height set to 'auto') */ mask-size: 50%; mask-size: 3em; mask-size: 12px; mask-size: auto; /* Two-value syntax */ /* first value: width of the image, second value: height */ mask-size: 50% auto; mask-size: 3em 25%; mask-size: auto 6px; mask-size: auto auto; /* Multiple values */ /* Do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size: 50%, 25%, 25%; mask-size: 6px, auto, contain; /* Global values */ mask-size: inherit; mask-size: initial; mask-size: unset;
mask
shorthand property that is applied to the element after the mask-size
CSS property, the value of this property is then reset to its initial value by the shorthand property.Initial value | auto |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Media | visual |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | repeatable list of simple list of length, percentage, or calc |
Canonical order | per grammar |
One or more <bg-size>
values, separated by commas.
A <bg-size>
can be specified in one of three ways:
To specify a size using width and height, you can supply one or two values:
auto
.Each value can be a <length>
, a <percentage>
, or auto
.
<length>
<length>
value scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed.<percentage>
<percentage>
value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of mask-origin
. The mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. Negative percentages are not allowed.auto
contain
mask-position
.cover
contain
. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either on left/right or at top/bottom.The interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height). A bitmap image always has intrinsic dimensions and an intrinsic proportion. A vector image may have both intrinsic dimensions and thus it has an intrinsic proportion too. It also may have one or no intrinsic dimensions and in either case it might or might not have an intrinsic proportion. Gradients are treated as images with no intrinsic dimensions or intrinsic proportion.
The rendered size of the mask image is then computed as follows:
mask-size
are specified and are not auto
:mask-size
is contain
or cover
:mask-size
is auto
or auto auto
:contain
had been specified instead. If the image has one intrinsic dimension and a proportion, it's rendered at the size determined by that one dimension and the proportion. If the image has one intrinsic dimension but no proportion, it's rendered using the intrinsic dimension and the corresponding dimension of the mask positioning area.mask-size
has one auto
component and one non-auto
component:<bg-size>#where
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere
<length-percentage> = <length> | <percentage>
#masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg); mask-size: 50%; /* Can be changed in the live sample */ margin-bottom: 10px; }
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-size' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | ? | 17 | 53 | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | ? | 53 | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size