CSS3 添加了几个新的的背景属性，用于更大背景元素控制

他们分别是

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

而且 CSS3 还支持使用多重背景图像

浏览器支持

下表中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性
background-image 多重背景	4.0	9.0	3.6	3.1	11.5
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-
background-origin	1.0	9.0	4.0	3.0	10.5
background-clip	4.0	9.0	4.0	3.0	10.5

CSS3 background-image 属性

CSS3 background-image 属性可以添加多重背景图像

背景图像之间使用逗号隔开

所有的图片中显示在最顶端的为第一张，第二层的为第二章，以此类推

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

运行范例 »

显示效果如下

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

CSS3 background-image 不同图片不同的属性

我们还可以给不同的图片设置多个不同的属性

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

运行范例 »

CSS3 background-size 属性

CSS3 background-size 属性可以指定背景图像的大小

CSS3 以前，背景图像大小由图像的实际大小决定

CSS3 中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小

我们可以指定像素或百分比大小

如果是百分比，则是相对于父元素的宽度和高度的百分比的大小

div
{
    background:url(/static/i/css3/img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

运行范例 »

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

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

运行范例 »

CSS3 的 background-Origin 属性

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

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

在 content-box 中定位背景图片

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

运行范例 »

CSS3 多个背景图像

CSS3 允许在元素上添加多个背景图像

下面的 CSS 样式在 body 元素中设置两个背景图像

body
{ 
    background-image:url(/static/i/css3/img_flwr.gif),url(/static/i/css3/img_tree.gif);
}

运行范例 »

CSS3 background-clip 属性

CSS3 background-clip 属性可以裁剪背景

CSS3 background-clip 背景剪裁属性是从指定位置开始绘制

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

运行范例 »

CSS3 新的背景属性

属性	描述	CSS
background-clip	规定背景的绘制区域	3
background-origin	规定背景图片的定位区域	3
background-size	规定背景图片的尺寸	3

简单教程

CSS3 背景 background

浏览器支持

CSS3 background-image 属性

Lorem Ipsum Dolor

CSS3 background-image 不同图片不同的属性

CSS3 background-size 属性

CSS3 的 background-Origin 属性

CSS3 多个背景图像

CSS3 background-clip 属性

CSS3 新的背景属性

CSS 3 基础教程