css3背景
- 1. background-size
- 2. background-origin
- 3. background-clip
示例：
className
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
background-size两个参数可以设置成和原图像不一样大小的尺寸，不过那样背景图片就被拉伸了
background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域
示例：
.className{
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);
}
background-clip 属性
标签定义及使用说明
JavaScript 语法:
object object.style.backgroundClip="content-box"
语法
background-clip: border-box|padding-box|content-box;
| 值 | 说明 |
|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
实例
规定背景的绘制区域：
.className
{
background-color:yellow;
background-clip:content-box;
}
总结：
| 属性 | 描述 | CSS |
|---|---|---|
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |