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:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。