background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于?父元素的宽度和高度的百分比的大小。
调整背景图片的大小:
- div
- {
- background:url(bg_flower.gif);
- -moz-background-size:63px 100px; /* 老版本的 Firefox */
- background-size:63px 100px;
- background-repeat:no-repeat;
- }
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

实例
在 content-box 中定位背景图片:
- .wrap {
- background:url(bg_flower.gif);
- background-repeat:no-repeat;
- background-size:100% 100%;
- -webkit-background-origin:content-box; /* Safari */
- background-origin:content-box;
- }
CSS3 允许您为元素使用多个背景图像。
实例:
为 body 元素设置两幅背景图片:
- body
- {
- background-image:url(bg_flower.gif),url(bg_flower_2.gif);
- }
标签定义及使用说明
JavaScript 语法:
- object object.style.backgroundClip="content-box"
语法
- background-clip: border-box|padding-box|content-box;
| 值 | 说明 |
| border-box |
默认值。背景绘制在边框方框内(剪切成边框方框)。 |
| padding-box |
背景绘制在衬距方框内(剪切成衬距方框)。 |
| content-box |
背景绘制在内容方框内(剪切成内容方框)。 |
实例
规定背景的绘制区域:
- .wrap
- {
- background-color:yellow;
- background-clip:content-box;
- }
| 属性 | 描述 | CSS |
| background-clip |
规定背景的绘制区域。 |
3 |
| background-origin |
规定背景图片的定位区域。 |
3 |
| background-size |
规定背景图片的尺寸。 |
3 |
背景设置
原文:http://www.cnblogs.com/qiuzhimutou/p/4765951.html