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

mask-image বৈশিষ্ট্যটি একটি ছবি নির্দিষ্ট করতে দেয় যা উপাদানের জন্য মাস্ক হিসাবে ব্যবহার করা হবে। মাস্ক নির্ধারণ করে যে উপাদানের কোন অংশগুলি দৃশ্যমান হবে এবং কোনগুলি লুকানো থাকবে। মাস্ক হিসাবে SVG, PNG ছবি বা গ্রেডিয়েন্ট ব্যবহার করা যেতে পারে।

সিনট্যাক্স

সিলেক্টর {
	mask-image: none | <image> | <url>;
}

মান

মান	বর্ণনা
`none`	মাস্কিং বন্ধ করে (ডিফল্ট মান)।
`url()`	মাস্ক ছবির পথ (SVG, PNG)।
`linear-gradient()`	মাস্ক হিসাবে লিনিয়ার গ্রেডিয়েন্ট।
`radial-gradient()`	মাস্ক হিসাবে রেডিয়াল গ্রেডিয়েন্ট।

উদাহরণ . মাস্ক হিসাবে SVG ব্যবহার

একটি ছবির উপর মাস্ক হিসাবে একটি হার্টের SVG ছবি প্রয়োগ করা যাক:

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

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

উদাহরণ . মাস্ক হিসাবে গ্রেডিয়েন্ট ব্যবহার

একটি উপাদানের জন্য মাস্ক হিসাবে একটি লিনিয়ার গ্রেডিয়েন্ট প্রয়োগ করা যাক:

<div id="elem"></div>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, transparent, black);
}

উদাহরণ . মাস্ক হিসাবে SVG উপাদান ব্যবহার

একটি SVG উপাদান ব্যবহার করে একটি মাস্ক তৈরি করা যাক এবং এটিকে একটি ছবিতে প্রয়োগ করা যাক:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	mask-image: url(#mask);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

আরও দেখুন

mask-position বৈশিষ্ট্য,
উপাদানের সাপেক্ষে মাস্কের অবস্থান নির্ধারণ করে
mask-size বৈশিষ্ট্য,
মাস্কের আকার নির্ধারণ করে
mask-repeat বৈশিষ্ট্য,
মাস্কের পুনরাবৃত্তি নির্ধারণ করে
mask-mode বৈশিষ্ট্য,
মাস্ক কীভাবে ব্যাকগ্রাউন্ডের সাথে ইন্টারঅ্যাক্ট করে তা নির্ধারণ করে
mask বৈশিষ্ট্য,
সমস্ত মাস্কিং বৈশিষ্ট্যের জন্য সংক্ষিপ্ত রূপ