mask-position сипаттамасы

mask-position сипаттамасы масканың элементке қатысты бастапқы орнын белгілейді. background-position сияқты жұмыс істейді, бірақ маскаларға қолданылады.

Синтаксис

cssселектор {
  mask-position: <position>;
}

Мәндері

Мысал . Масканы ортаға орналастыру

>Суреттің ортасындағы жүрек пішінді маска:

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

Результат:

Мысал . Жоғарғы сол жақ бұрыш

>Жоғарғы сол жақ бұрыштағы маска:

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

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

Результат:

Мысал . Төменгі оң жақ бұрыш

>Төменгі оң жақ бұрыштағы маска:

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

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

Результат:

Мысал . Нақты координаттар

>Маска нақты координаттар бойынша орналасады:

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

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

Результат:

Мысал . Пайызбен позициялау

>Масканы пайыздар көмегімен позициялау:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 30% 70%;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Сондай-ақ қараңыз