ব্যাকগ্রাউন্ডক্লিপ প্রপার্টি আমাদের নিয়ন্ত্রণ করতে দেয় যে ব্যাকগ্রাউন্ড ইমেজ কতদূর আঁকা হবে অর্থাৎ ব্যাকগ্রাউন্ড ইমেজের পেইন্টিং এরিয়া। এটি সেই পেইন্টিং এরিয়া সেট বা ফেরানোর জন্য ব্যবহৃত হয়।
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলব্যাকগ্রাউন্ডক্লিপ প্রপার্টি −
সেট করা হচ্ছেbackground-clip: border-box | padding-box | content-box
মান
নিম্নোক্ত মান −
| Sr. No | মান এবং বর্ণনা |
|---|---|
| 1 | বর্ডার-বক্স এটি বর্ডার-বাক্সের মধ্যে পটভূমি ক্লিপ করে এবং এটিই ডিফল্ট মান। |
| 2 | প্যাডিং-বক্স এটি প্যাডিং বাক্সের মধ্যে পটভূমি ক্লিপ করে। |
| 3 | সামগ্রী-বক্স পটভূমি বিষয়বস্তু বাক্সের মধ্যে ক্লিপ করা হয়. |
উদাহরণ
ব্যাকগ্রাউন্ডক্লিপ প্রপার্টি -
-এর জন্য একটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<style>
#one {
box-shadow: 0 0 2px black;
padding: 18px;
background: skyblue;
background-clip: content-box;
}
</style>
<script>
function changeBackClip(){
document.getElementById("one").style.backgroundClip="padding-box";
document.getElementById("Sample").innerHTML="The background clip property is now padding-box";
background-clip: border-box | padding-box | content-box
}
</script>
</head>
<body>
<div id="one">
Phasellus eu justo lectus. Praesent et nulla facilisis, venenatis justo eget, tempor lectus.
Integer ut felis vel lectus convallis fermentum. Fusce ut felis mauris.</div>
<p>Change the above div background-clip value by clicking the below button</p>
<button onclick="changeBackClip()">CHANGE CLIP</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
চেঞ্জ ক্লিপ বোতামে ক্লিক করলে -
