背景设置

1.border-image属性

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于?父元素的宽度和高度的百分比的大小。

调整背景图片的大小：

1. div
2. {
3. background:url(bg_flower.gif);
4. -moz-background-size:63px 100px; /* 老版本的 Firefox */
5. background-size:63px 100px;
6. background-repeat:no-repeat;
7. }

2.background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

实例

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

1. .wrap {
2.    background:url(bg_flower.gif);
3. background-repeat:no-repeat;
4. background-size:100% 100%;
5. -webkit-background-origin:content-box; /* Safari */
6. background-origin:content-box;
7. }

3.多重背景图片

CSS3 允许您为元素使用多个背景图像。

实例：

为 body 元素设置两幅背景图片：

1. body
2. {
3. background-image:url(bg_flower.gif),url(bg_flower_2.gif);
4. }

4.background-clip 属性

标签定义及使用说明

JavaScript 语法:

1. object object.style.backgroundClip="content-box"

语法

1. background-clip: border-box|padding-box|content-box;

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

实例

规定背景的绘制区域：

1. .wrap
2. {
3. background-color:yellow;
4. background-clip:content-box;
5. }

新的背景属性

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