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