Savybė mask-size

Savybė mask-size nustato kaukės paveikslėlio dydį. Galima nustatyti konkrečius dydžius pikseliais/procentais arba naudoti raktažodžius cover ir contain.

Sintaksė

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

Reikšmės

Pavyzdys . Cover dydis

Kaukė keičiama masteliu, kad visiškai padengtų elementą:

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;
}

Результат:

Pavyzdys . Contain dydis

Kaukė keičiama masteliu, kad visiškai tilptų į elementą:

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;
}

Результат:

Pavyzdys . Fiksuotas dydis pikseliais

Kaukė 150×150 pikselių dydžio:

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;
}

Результат:

Pavyzdys . Dydis procentais

Kaukė užima 80% elemento pločio ir 60% elemento aukščio:

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;
}

Результат:

Pavyzdys . Skirtingi dydžiai ašyse

Kaukė 200px pločio ir 100px aukščio:

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;
}

Результат:

Taip pat žiūrėkite