background-clip প্রোপার্টি

background-clip প্রোপার্টিটি নির্ধারণ করে কিভাবে ব্যাকগ্রাউন্ড ভরাট বা ব্যাকগ্রাউন্ড ছবিটি এলিমেন্টের সাপেক্ষে অবস্থান করবে: সীমানার নিচে, শুধুমাত্র padding-এর ভিতরে অথবা শুধুমাত্র কন্টেন্টের উপরে।

বৈশিষ্ট্যসমূহ

border-box ব্যবহার করার সময় স্বচ্ছ সীমানা সহ ব্যাকগ্রাউন্ড তাদের নিচে দৃশ্যমান হবে
text মানটির সম্পূর্ণ সমর্থনের জন্য ভেন্ডর প্রিফিক্সের প্রয়োজন হয়
প্রোপার্টিটি গ্রেডিয়েন্ট এবং একাধিক ব্যাকগ্রাউন্ডের সাথে কাজ করে
border-radius ব্যবহার করলে ব্যাকগ্রাউন্ড গোলাকার কোণ বরাবর কাটা হয়

ব্রাউজার দ্বারা সমর্থন

সমস্ত আধুনিক ব্রাউজার border-box, padding-box এবং content-box মানগুলো সমর্থন করে। text মানটির জন্য -webkit- প্রিফিক্সের প্রয়োজন এবং এটি Chrome, Safari, Edge-এ সমর্থিত।

সিনট্যাক্স

সিলেক্টর {
	background-clip: border-box | padding-box | content-box | text;
}

মানসমূহ

মান	বর্ণনা
`border-box`	ব্যাকগ্রাউন্ড সীমানার বাইরের প্রান্ত পর্যন্ত প্রসারিত হয় (সীমানার নিচে)।
`padding-box`	ব্যাকগ্রাউন্ড সীমানার ভিতরের প্রান্ত বরাবর কাটা হয় (`border`-এর নিচে যায় না)।
`content-box`	ব্যাকগ্রাউন্ড শুধুমাত্র কন্টেন্টের উপরে প্রদর্শিত হয় (`padding` কেটে ফেলা হয়)।
`text`	ব্যাকগ্রাউন্ড টেক্সট বরাবর কাটা হয়।

ডিফল্ট মান: border-box।

উদাহরণ . border-box মান

ব্যাকগ্রাউন্ড আধা-স্বচ্ছ সীমানার নিচে চলে যায়:

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

#elem {
	background-clip: border-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

উদাহরণ . padding-box মান

ব্যাকগ্রাউন্ড সীমানার নিচে যায় না:

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

#elem {
	background-clip: padding-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.5);
	padding: 30px;
	width: 250px;
	height: 150px;
}

উদাহরণ . content-box মান

ব্যাকগ্রাউন্ড padding-এ যায় না:

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

#elem {
	background-clip: content-box;
	background-color: #ffd6d6;
	background-repeat: no-repeat;
	border: 10px dashed rgba(0,0,0,0.3);
	padding: 30px;
	width: 250px;
	height: 150px;
}

উদাহরণ . text মান

ব্যাকগ্রাউন্ড টেক্সট বরাবর কাটা হয় (transparent মান সহ -webkit-text-fill-color প্রয়োজন):

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

#elem {
	display: inline-block;
	background: linear-gradient(to right, red, blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	
	font-size: 40px;
	font-weight: bold;
}

আরও দেখুন

background প্রোপার্টি,
যা ব্যাকগ্রাউন্ডের জন্য একটি শর্টহ্যান্ড প্রোপার্টি
background-origin প্রোপার্টি,
যা ব্যাকগ্রাউন্ডের মূল অবস্থান নির্ধারণ করে