CSS3之前,背景圖像大小由圖像的實際大小決定,background-size指定背景圖像的大小。css
你能夠指定像素或百分比大小,你指定的大小是相對於父元素的寬度和高度的百分比的大小。默認值爲圖片的實際尺寸。url
例如:圖片的實際大小爲220*150像素,在CSS3以前該圖片只能填充比它小的元素,要想「徹底」填充更大的元素就只能使用background-repeat了。code
background-origin屬性指定了背景圖像的位置區域。content-box, padding-box和 border-box區域內能夠放置背景圖像。默認值爲content-box。blog
百分比的參照物由background-origin決定:圖片
<style type="text/css"> div { width:300px; height:200px; padding:20px; border:10px dashed; background:url(flower.png) no-repeat; background-size:100% 100%; background-origin:border-box; } </style> <div>元素</div>
實際效果以下圖:im
<style type="text/css"> div { width:200px; height:200px; padding:20px; border:10px dotted; background:url(flower.png) 10px 10px no-repeat, url(tree.png) 50px 50px no-repeat; background-size:110px 75px, 100px 100px; } </style> <div>元素</div>
效果以下圖:db