Свойство mask-size

Свойство mask-size маска расмининг ҳажмини ўрнатади. Узунлик/фоизларда аниқ ҳажмларни бериш ёки cover ва contain калит сўзларидан фойдаланиш мумкин.

Синтаксис

cssселектор {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

Қийматлар

Мисол . Cover ҳажми

Маска элементни тўлиқ қоплаш учун ҳажмланади:

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

Результат:

Мисол . Contain ҳажми

Маска элемент ичига тўлиқ сиғиши учун ҳажмланади:

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

Результат:

Мисол . Пикселлардаги белгиланган ҳажм

150×150 пиксел ўлчамдаги маска:

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

Результат:

Мисол . Фоизлардаги ҳажм

Маска элементнинг 80% эни ва 60% баландлигини эгаллайди:

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

Результат:

Мисол . Уқлар бўйича турли ўлчамлар

Маска 200px эни ва 100px баландлигида:

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

Результат:

Шунингдек қаранг