CSS3 background-origin ÊôÐÔ
ʵÀý
Ïà¶ÔÓÚÄÚÈÝ¿òÀ´¶¨Î»±³¾°Í¼Ïñ£º
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
ä¯ÀÀÆ÷Ö§³Ö
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE9+¡¢Firefox 4+¡¢Opera¡¢Chrome ÒÔ¼° Safari 5+ Ö§³Ö background-origin ÊôÐÔ¡£
¶¨ÒåºÍÓ÷¨
background-origin ÊôÐԹ涨 background-position ÊôÐÔÏà¶ÔÓÚʲôλÖÃÀ´¶¨Î»¡£
×¢ÊÍ£ºÈç¹û±³¾°Í¼ÏñµÄ background-attachment ÊôÐÔΪ "fixed"£¬Ôò¸ÃÊôÐÔûÓÐЧ¹û¡£
ĬÈÏÖµ£º | padding-box |
---|---|
¼Ì³ÐÐÔ£º | no |
°æ±¾£º | CSS3 |
JavaScript Óï·¨£º | object.style.backgroundOrigin="content-box" |
Óï·¨
background-origin: padding-box|border-box|content-box;
Öµ | ÃèÊö | ²âÊÔ |
---|---|---|
padding-box | ±³¾°Í¼ÏñÏà¶ÔÓÚÄڱ߾à¿òÀ´¶¨Î»¡£ | ²âÊÔ |
border-box | ±³¾°Í¼ÏñÏà¶ÔÓڱ߿òºÐÀ´¶¨Î»¡£ | ²âÊÔ |
content-box | ±³¾°Í¼ÏñÏà¶ÔÓÚÄÚÈÝ¿òÀ´¶¨Î»¡£ | ²âÊÔ |
Ïà¹ØÒ³Ãæ
CSS3 ½Ì³Ì£ºCSS3 ±³¾°