پس زمینه - کلیپ در CSS (Background Clip)
ویژگی «کلیپ پس زمینه» در CSS تعیین می کند رنگ، تصویر یا گرادیان پس زمینه تا کدام ناحیه عنصر ادامه یابد. برای مطالعه این صفحه در آینده، پیوند کلیپ پس زمینه را نگه دارید.
ویژگی background-clip
این ویژگی محدوده نقاشی پس زمینه را مشخص می کند و سه مقدار می پذیرد:
border-box— پس زمینه پشتِ حاشیه هم ادامه می یابد (پیش فرض)padding-box— پس زمینه تا لبه داخلی حاشیه کشیده می شودcontent-box— پس زمینه فقط تا لبه محتوای عنصر ادامه دارد
نکته: این ویژگی نحوه گسترش پس زمینه را کنترل می کند؛ برای تعیین «مبدأ» قرارگیری تصویر به مبدأ پس زمینه (background-origin) مراجعه کنید.
نمونه استفاده از کلیپ پس زمینه با تصویر
#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; }نمونه کلیپ پس زمینه با رنگ
#c1 { border: 5px dotted black; padding: 35px; background-color: lightblue; background-clip: border-box; } #c2 { border: 5px dotted black; padding: 35px; background-color: lightblue; background-clip: padding-box; } #c3 { border: 5px dotted black; padding: 35px; background-color: lightblue; background-clip: content-box; }هشدار: مقدار پیش فرض border-box است؛ بنابراین اگر حاشیه ضخیم یا شفاف دارید، پس زمینه ممکن است پشت آن دیده شود.
ویژگی های مرتبط و ادامه مطالعه
برای اندازه تصاویر پس زمینه از پس زمینه - اندازه (background-size) کمک بگیرید. همچنین ترکیب چند تصویر در پس زمینه - چندگانه بررسی شده است. برای جزئیات مرجع، به صفحات background-clip در MDN و پس زمینه در MDN سر بزنید.