Eienskap mask-size
Die mask-size eienskap stel die grootte van die maskerbeeld. Jy kan spesifieke groottes in pixels/persentasies spesifiseer of die sleutelwoorde cover en contain gebruik.
Sintaksis
selektor {
mask-size: auto | <length> | <percentage> | cover | contain;
}
Waardes
| Waarde | Beskrywing |
|---|---|
auto |
Oorspronklike grootte van die beeld (verstek). |
cover |
Skaal die masker met behoud van verhoudings sodat dit die element heeltemal bedek. |
contain |
Skaal die masker met behoud van verhoudings sodat dit heeltemal binne die element pas. |
100px 50px |
Spesifieke groottes in pixels. |
50% 100% |
Groottes as persentasies van die element se groottes. |
Voorbeeld . Grootte cover
Die masker word geskaal om die element heeltemal te bedek:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
Voorbeeld . Grootte contain
Die masker word geskaal om heeltemal binne die element te pas:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Voorbeeld . Vaste grootte in pixels
Masker met 'n grootte van 150×150 pixels:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Voorbeeld . Grootte in persentasie
Die masker beslaan 80% van die breedte en 60% van die hoogte van die element:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
Voorbeeld . Verskillende groottes op asse
Masker 200px wyd en 100px hoog:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
Sien ook
-
eienskap
mask-position,
definieer die posisie van die masker -
eienskap
mask-repeat,
definieer die herhaling van die masker -
eienskap
mask,
verkorte vorm vir alle maskeringseienskappe
