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

cssselektor {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

Waardes

Voorbeeld . Grootte cover

Die masker word geskaal om die element heeltemal te bedek:

html<img id="image" src="image.jpg">

css#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:

html<img id="image" src="image.jpg">

css#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:

html<img id="image" src="image.jpg">

css#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:

html<img id="image" src="image.jpg">

css#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:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px 100px;
  mask-repeat: no-repeat;
}

Результат:

Sien ook