বৈশিষ্ট্য mask-position
বৈশিষ্ট্য mask-position এলিমেন্টের সাপেক্ষে মাস্কের প্রারম্ভিক অবস্থান নির্ধারণ করে।
এটি background-position-এর মতোই কাজ করে, কিন্তু মাস্কের ক্ষেত্রে প্রয়োগ করা হয়।
সিনট্যাক্স
সিলেক্টর {
mask-position: <position>;
}
মানসমূহ
| মান | বর্ণনা |
|---|---|
top left |
বাম উপরের কোণায় (ডিফল্ট হিসেবে)। |
center |
এলিমেন্টের কেন্দ্রে। |
50% 50% |
center-এর অনুরূপ। |
right bottom |
ডান নিচের কোণায়। |
100px 200px |
পিক্সেলে নির্দিষ্ট স্থানাঙ্ক। |
উদাহরণ . মাস্ককে কেন্দ্রে স্থাপন
ছবির কেন্দ্রে হার্ট-আকৃতির মাস্ক:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
উদাহরণ . বাম উপরের কোণ
বাম উপরের কোণায় মাস্ক:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
উদাহরণ . ডান নিচের কোণ
ডান নিচের কোণায় মাস্ক:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
উদাহরণ . নির্দিষ্ট স্থানাঙ্ক
মাস্ককে নির্দিষ্ট স্থানাঙ্ক অনুযায়ী স্থাপন করা হয়েছে:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
উদাহরণ . শতাংশ ভিত্তিক অবস্থান
শতাংশ ব্যবহার করে মাস্কের অবস্থান নির্ধারণ:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
আরও দেখুন
-
বৈশিষ্ট্য
mask-size,
মাস্কের আকার নির্ধারণ করে -
বৈশিষ্ট্য
mask-origin,
অবস্থানের রেফারেন্স পয়েন্ট নির্ধারণ করে -
বৈশিষ্ট্য
mask,
মাস্কিং সংক্রান্ত সকল বৈশিষ্ট্যের জন্য সংক্ষিপ্ত রূপ
