background attributes
/*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%;
The difference between cover and contain in background-size
1. In the case of no-repeat, if the container's aspect ratio is different from the picture's aspect ratio,
cover (filled): the picture's aspect ratio remains unchanged, and the entire container's width and height are covered , And the extra part of the picture will be cut off;
contain: the aspect ratio of the picture itself remains unchanged, and the picture itself can be zoomed to be fully displayed without being cropped, so the container will have a blank area;
2 In the case of repeat:
cover: the same as above; contain: there is at least one complete picture in the container, the background picture is tiled in the blank area of the container, and the ones that cannot be laid are cut out.