مبدأ پس زمینه (Background Origin)
ویژگی «مبدأ پس زمینه (Background Origin)» مشخص می کند تصویر پس زمینه از کجا شروع شود. سه ناحیه داریم: padding-box، border-box و content-box.
background-origin چیست؟
background-origin نقطه شروع تصویر را تعیین می کند. پیش فرض روی padding-box است. اگر background-attachment برابر fixed باشد، اثری ندارد.
مثال: تفاوت padding-box، border-box و content-box
#div1 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: padding-box;
}
#div2 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#div3 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
گام های عملی سریع
- مرز و پدینگ را مشخص کن.
- برای تصویر،
background-originرا تنظیم کن. - نتیجه را با
no-repeatواضح تر ببین.
نکته: برای موضوعات مرتبط به اندازه، صفحه اندازه پس زمینه را ببین.
نکته: اگر چند تصویر داری، ابتدا با پس زمینه های چندگانه آشنا شو.
برای بازگشت به این صفحه از لینک مبدأ پس زمینه استفاده کن. سپس موضوع بعدی، یعنی background-clip را بخوان.
جمع بندی سریع
padding-boxپیش فرض و کاربردی است.border-boxاز گوشه مرز شروع می کند.content-boxاز محتوای خالص آغاز می شود.fixedاثر origin را خنثی می کند.