বৈশিষ্ট্য mask-origin

mask-origin বৈশিষ্ট্যটি মাস্কের অবস্থানের জন্য রেফারেন্স পয়েন্ট সেট করে। এটি নির্ধারণ করে যে উপাদানের কোন অংশের (সীমানা, প্যাডিং বা কন্টেন্ট) সাপেক্ষে মাস্কটি বসানো হবে।

সিনট্যাক্স

সিলেক্টর {
	mask-origin: content-box | padding-box | border-box;
}

মানসমূহ

মান	বর্ণনা
`border-box`	মাস্কটি উপাদানের সীমানার (বর্ডার সহ) সাপেক্ষে অবস্থান করে।
`padding-box`	মাস্কটি প্যাডিং এলাকার সাপেক্ষে অবস্থান করে (ডিফল্টভাবে)।
`content-box`	মাস্কটি উপাদানের কন্টেন্টের সাপেক্ষে অবস্থান করে।

উদাহরণ . border-box

মাস্কটি উপাদানের সীমানার সাপেক্ষে অবস্থান করে:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: border-box;
}

উদাহরণ . padding-box

মাস্কটি প্যাডিং এলাকার সাপেক্ষে অবস্থান করে:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: padding-box;
}

উদাহরণ . content-box

মাস্কটি কন্টেন্টের সাপেক্ষে অবস্থান করে:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: content-box;
}

আরও দেখুন

mask-clip বৈশিষ্ট্য,
মাস্ক ক্লিপিং এর এলাকা নির্ধারণ করে
mask-position বৈশিষ্ট্য,
মাস্কের অবস্থান সেট করে
mask বৈশিষ্ট্য,
মাস্কিং সম্পর্কিত সকল বৈশিষ্ট্যের জন্য সংক্ষিপ্ত রূপ
background-origin বৈশিষ্ট্য,
উপাদানের ব্যাকগ্রাউন্ডের জন্য অনুরূপ বৈশিষ্ট্য