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

Результат:

මෙයද බලන්න