CSS3:backgroud-size和background-origin的使用方法

backgroud-size

CSS3之前,背景圖像大小由圖像的實際大小決定,background-size指定背景圖像的大小。css

你能夠指定像素或百分比大小,你指定的大小是相對於父元素的寬度和高度的百分比的大小。默認值爲圖片的實際尺寸。url

例如:圖片的實際大小爲220*150像素,在CSS3以前該圖片只能填充比它小的元素,要想「徹底」填充更大的元素就只能使用background-repeat了。code

background-origin

background-origin屬性指定了背景圖像的位置區域。content-box, padding-box和 border-box區域內能夠放置背景圖像。默認值爲content-box。blog

百分比的參照物由background-origin決定:圖片

  • 若值爲content-box,100%爲元素的width;
  • 若值爲padding-box,100%爲元素的width+padding;
  • 若值爲border-box,100%爲元素的width+padding+border-width。

示例1

<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

示例2:多背景圖片

<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

相關文章
相關標籤/搜索