这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
background-color：设置元素的背景颜色；
background-image：设置元素的背景图像；
- url('URL')：指向图像的路径，可以将 url() 看作是一个函数，括号中的 URL 为图像的具体路径
- linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);
- repeating-linear-gradient(45deg, #F27121 20px, #E94057 30px, #8A2387 40px);
- radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
- repeating-radial-gradient(circle at 20% 40%,#eea2a2 20px, #57c6e1 20px, #b49fda 40px, #7ac5d8 40px, #b49fda 60px, #4F9C9C 60px, #57c6e1 80px, #99CCCC 80px, #eea2a2 100px);
background-repeat：控制背景图像是否重复,该属性的可选值如下：
- repeat 默认值，背景图像将在垂直方向和水平方向上重复
- repeat-x 背景图像仅在水平方向上重复
- repeat-y 背景图像仅在垂直方向上重复
- no-repeat 背景图像仅显示一次，不在任何方向上重复
background-position：设置背景图像的起始位置
background-attachment：控制背景图像是否跟随窗口滚动；
- scroll 默认值，背景图像随着页面元素的滚动而移动
- fixed 当页面的其余部分滚动时，背景图像固定不动
background-size：设置背景图像的尺寸；
- xpos ypos
- x% y%
- cover 保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完全覆盖元素所在的区域
- contain 保持背景图像的横纵比例并将图像缩放至足够大，使背景图像可以完整的显示在元素所在区域
background-origin：设置 background-position 属性相对于什么位置来定位背景图像；
- padding-box 相对于元素的内边距区域来定位背景图像
- border-box 相对于元素的边框区域来定位背景图像
- content-box 相对于元素的内容区域来定位背景图像
background-clip：设置背景图像的显示区域；
background：背景属性的缩写，可以在一个声明中设置所有的背景属性。推荐按照：
如果同时设置 background-position 和 background-size 属性，这两个属性之间需要使用斜线/分隔，并且需要遵循 background-position 属性在前 background-size 属性在后的顺序；
如果同时设置 background-origin 和 background-clip 属性，需要遵循 background-origin 属性在前 background-clip 属性在后的顺序。
如果 background-origin 与 background-clip 属性的值相同，则可以只设置一个值。
