背景的属性

背景

背景有以下几个属性：

background-image
background-size
background-origin
background-clip

1. background-image不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

以上代码如图所示：

也可以给不同属性设置多个不同属性

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2. background-size指定背景图像的大小。

伸展背景图像完全填充内容区域：

div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

3.background-origin背景图像的位置区域。

（content-box, padding-box,和 border-box区域内可以放置背景图像。）

在 content-box 中定位背景图片：

div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

4.background-clip规定了背景的绘制区域。

指定位置开始绘制：

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}