css基础知识8背景属性

css3新增属性

1.背景属性

语法：background-clip:border-box/padding-box/content-box
说明：在css2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在css2.1乃至css3中，背景的显示范围是指包括边框在内的范围。在css3中可以使用backgrouund-clip来修饰背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框；如果是设定为padding，则不包括边框。border-box：背景被裁减到边框盒
padding-box：背景被裁减到内边距框
content-box：背景被裁减到内容框
具体页面效果如图所示，可以看到border-box、padding-box、content-box区别：

语法：background-origin:border-box/padding-box/content-box
说明：在绘制背景图像时，默认从内部padding区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。
页面效果如图所示：

语法：background-size:length/percentage/cover/contain
说明：使用background-size属性可以指定背景图像的大小。
length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为"auto"。
percentage：以父元素的百分比来设置背景图像的宽度和高度。
cover：把背景图像扩充至足够大使背景图像完全覆盖在背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把背景图像扩展至最大尺寸。使其宽度和高度完全适应内容区域。
页面效果如图所示：