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 ±³¾°