CSS3学习：设置background背景

CSS3可以通过background-image属性添加背景图片，元素的背景图片包括填充和边界（但不包括边距），背景颜色包括边距，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

 

#bgimage

 

{

 

    background-image: url(images/img_flwr.gif), url(images/paper.gif);

 

    background-position: right bottom, left top;

 

    background-repeat: no-repeat, repeat;

 

    padding: 15px;

 

}

CSS3可以通过background-size指定背景图像的大小，可以指定像素或百分比大小，百分比是相对于父元素的宽度和高度而言。

CSS3的background-origin属性指定了背景图像的位置区域，content-box、 padding-box和 border-box分别表示从content区域、padding区域、border区域开始显示背景。

 

#div2

 

{

 

  float:left;margin-right:20px;

 

background-origin:padding-box;

 

}

 

#div3

 

{   float:left;

 

background-origin:content-box;

 

}

CSS3中background-clip背景剪裁属性是从指定位置开始绘制，背景图片默认从padding开始放置，如果设置content-box表示将图片所占的padding部分截取掉，背景图片从content开始放置。

 

#example2

 

{

 

    float:left;

 

    width:300px;

 

    height:200px;

 

    border: 10px dotted black;

 

    padding:35px;

 

    background:url(images/flower.jpg) no-repeat;

 

    background-clip: padding-box;

 

   margin-right:20px;

 

}

 

#example3

 

{

 

    float:left;

 

    width:300px;

 

    height:200px;

 

    border: 10px dotted black;

 

    padding:35px;

 

    background:url(images/flower.jpg) no-repeat;

 

    background-clip: content-box;

 

}