সিএসএস(৩) background-clip প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| background-clip | ৪.০ | ৯.০ | ৪.০ | ৩.০ | ১০.০ |
সংজ্ঞা ও ব্যবহার
ব্যাকগ্রাউন্ডের পেইন্টিং এরিয়া বুঝানোর জন্য background-clip প্রোপার্টি ব্যবহার করা হয়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| border-box | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
background-clip: border-box/padding-box/content-box/initial/inherit;
ব্যাকগ্রাউন্ডের পেইন্টিং এরিয়া নির্ধারণ করেঃ
উদাহরণ
background-clip: padding-box এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<p><strong>নোটঃ </strong> background-clip প্রোপার্টি এক্সপ্লোরার(৮) এবং তার আগের ভার্সনে সাপোর্ট করে না। </p>
<p> background-clip নেই (border-box হচ্ছে ডিফল্ট):</p>
<div id="example1">
<h2>স্যাট একাডেমী </h2>
<p> স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। </p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>স্যাট একাডেমী </h2>
<p> স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। </p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>স্যাট একাডেমী </h2>
<p> স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। </p>
</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.backgroundClip="content-box"উদাহরণ
object.style.backgroundClip="content-box" এর ব্যবহারঃ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<style>
#myDIV {
width: 300px;
height: 300px;
padding: 50px;
background-color: coral;
background-clip: border-box;
color: white;
border: 5px dotted lightgrey;
}
</style>
</head>
<body>
<p> "উদাহরণ দেখুন" বাটনে ক্লিক করে DIV এলিমেন্টের "content-box" এ background-clip property সেট করুনঃ </p>
<button onclick="myFunction()">উদাহরণ দেখুন </button>
<div id="myDIV">
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান। স্যাট একাডেমী একটি ফ্রি কম্পিউটার প্রতিষ্ঠান।
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.backgroundClip = "content-box";
}
</script>
</body>
</html>
ফলাফল
background-clip প্রোপার্টির ভ্যালু-সমূহ
- border-box - বর্ডার বক্সের ব্যাকগ্রাউন্ড যুক্ত করা।
- padding-box -পেডিং বক্সে ব্যাকগ্রাউন্ড যুক্ত করা।
- content-box -কন্টেন্ট বক্সে ব্যাকগ্রাউন্ড যুক্ত ক... ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
background-clip প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।