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

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

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

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

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

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

সিনট্যাক্স

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

মানসমূহ

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

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

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

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

css#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 মান

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

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

css#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-এ যায় না:

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

css#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 প্রয়োজন):

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

css#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;
}

Результат:

আরও দেখুন