برش پس زمینه (Background Clip)
ویژگی «برش پس زمینه (Background Clip)» مشخص می کند پس زمینه تا کجا کشیده شود. یعنی رنگ، تصویر یا گرادیان تا کدام جعبه برود: مرز، پدینگ، یا محتوا.
background-clip چیست و چه مقادیری دارد؟
background-clip محدوده نقاشی پس زمینه را تعیین می کند. مقادیرش border-box، padding-box و content-box هستند. مقدار پیش فرض border-box است.
مثال با تصویر پس زمینه
#div1 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: content-box;
}
مثال با رنگ پس زمینه
#div1 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
گام های عملی سریع
- یک کادر با مرز و پدینگ بساز.
background-clipرا روی یکی از مقادیر بگذار.- تفاوت را با تصویر یا رنگ بررسی کن.
نکته: برای محل شروع تصویر، سراغ مبدأ پس زمینه برو. برای اندازه دهی، اندازه پس زمینه را ببین.
اگر چند تصویر داری، صفحه پس زمینه های چندگانه کمک می کند. برای بازگشت، از لینک برش پس زمینه استفاده کن.
جمع بندی سریع
border-boxپیش فرض است و پشت مرز می رود.padding-boxتا داخل مرز می رسد.content-boxفقط روی محتوای خالص می ماند.- با رنگ و تصویر هر دو قابل آزمون است.