background相关的样式属性

background 的属性

background当设置背景图片时要设置元素的宽或高

background-color    背景颜色
background-image   背景图像
background-repeat   是否重复背景图
background-position   背景图像的位置
background-size     背景图片的尺寸(cover是填充整个屏幕,contain是自适用内容高度和宽度)
background-origin   规定background-position属性相对于什么位置来定位
(border-box|padding-box|content-box;)
background-clip     背景的绘制区域
(border-box|padding-box|content-box;)
background-attachment   背景的绘制区域(fixed,默认scroll)

背景图片的位置和尺寸一起使用时需使用/连接
background:  #00FF00 url(xx) no-repeat center/100% 100%;

background-size中cover和contain的区别

1.在no-repeat情况下，如果容器宽高比与图片宽高比不同，
cover(塞满)：图片宽高比不变，铺满整个容器的宽高，而图片多出的部分则会被截掉；
contain(包含)：图片自身的宽高比不变，缩放至图片自身能完全显示出来，不会被裁剪，所以容器会有留白区域；
2.在repeat情况下：
cover:与上述相同；
contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

背景图与图片的区别?

如果是背景图只能按标准尺寸占一屏幕，不占据位置，其他元素依次排放在背景图之上；
图片的话无所谓，可以超过一屏，然后采取定位的方式把其他元素定位到图片上。