携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第一天，点击查看活动详情
background概述
background-color:
background-image:
常用写法:
background: url() no-repeat
background-repeat
如何重复背景图像。no-repeat, repeat, repeat-x,repeat-y
background-attachment
我目前还没怎么用过
背景图像是否固定或者随着页面的其余部分滚动
background-position(设置图片在容器中的位置)(重点)
background-position为一个集合属性，设置的是背景图的起始位置，
分别为background-position-x
和background-position-y,
可用的值有left,right,top,bottom,
以及固定像素值和百分比值。
- background-position-x: left （等价于0%）
- background-position-x: right （等价于100%）
- background-position-y: top （等价于0%）
- background-position-x: bottom （等价于100%）
也可以用百分比或者数值(如10px 10px),表示图片距离左边框和上边框的距离
此时图片是居中显示的.
如果用w代表容器元素宽度，h代表容器元素高度，bw代表背景图宽度，bh代表背景图高度，可以得出这么一个公式：
background-position-x: percent = (w - bw) * percent
background-position-x的像素值等于**「容器元素的宽度值减去背景图的宽度」**，background-position-y: percent = (h - bh) * percent
background-position-y的像素值等于**「容器元素的高度值减去背景图的高度」**；
重点
如果设置 background-size:100% 100%
那么不论background-position:设置为何种百分比,都不会发生偏移,可以占满全屏
background-size(重点)
背景图片的尺寸。设置背景缩放
background-size: length|percentage|cover|contain;
- length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
- percentage：宽 高 如果只给出一个值，第二个是设置为"auto( 自动)"
- cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小，可能会溢出。
- contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小，可能会有部分空白区域。
简写顺序(重点)
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
实例 ``
background: url("../../assets/images/Frame 66.png") no-repeat 100% 100%/100% 100%;
background: #062199;
