背景属性
background-size
- 作用：background-size 属性规定背景图片的尺寸
- 语法：background-size: length|percentage|cover|contain;
- 取值：
| 值 |
描述 |
| 数值 |
设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| % |
以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain |
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
background-origin
- 作用：background-oigin 告诉系统背景图片从什么区域开始显示, 默认情况下就是从padding区域开始显示
- 语法：background-origin: padding-box|border-box|content-box;
- 取值：
| 值 |
描述 |
| padding-box |
背景图像相对于内边距框来定位。 |
| border-box |
背景图像相对于边框盒来定位。 |
| content-box |
背景图像相对于内容框来定位。 |
background-clip
- 作用：background-clip规定背景的绘制区域，默认情况下就是从border区域开始显示
- 语法：background-clip: border-box|padding-box|content-box;
- 取值：
| 值 |
描述 |
| border-box |
背景被裁剪到边框盒。 |
| padding-box |
背景被裁剪到内边距框。 |
| content-box |
背景被裁剪到内容框。 |
多重背景图片
作用：为元素使用多个背景图像。
语法：background-image:url(bg_flower.gif),url(bg_flower_2.gif);
