CSS3（3）背景

CSS3 背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。

在本章您将了解以下背景属性：

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

CSS3 background-image属性

CSS3中可以通过background-image属性添加背景图片。

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

<style>
#example1 {
    background-image:  url(paper.gif),url(img_flwr.gif);  //前面的图片会优先显示（即会覆盖后面的图片）
    background-position: right bottom, left top; //两张图片的位置
    background-repeat: no-repeat, repeat; //是否平铺
    padding: 15px;
}
</style>

也可以这样写：

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

CSS3 background-size 属性

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

background-size:80px 60px;  或者  background-size:100% 100%;

CSS3 的 background-origin 属性

background-origin 属性指定了背景图像的位置区域。

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

background-origin:content-box;

CSS3 background-clip属性

和上面的origin意思一样，但这个对应的是背景颜色，origin对应的是背景图像。