বৈশিষ্ট্য 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;
}

Результат:

আরও দেখুন