最近发现自己写 CSS 的时候，感觉很不熟练了，比如最近用到的 background 属性，在这里做点小笔记
background-size
background-size 用于设置图片的大小，取值方式比较多样，具体如下
- 初始值：auto auto，以背景图片的比例缩放背景图片。
- contain：保证整张图片被包含进去，不保证填满整个容器
- cover：保证填满整个容器，不保证图片显示完全，尽可能大的缩放背景图像并保持宽高比例，以它的全部宽或者高覆盖所在容器
- apx bpx：设置宽度为 a，高度为 b，如果只设置一个值，则仅设置宽度，高度通过维持长宽比来确定
- a% b%：相对背景区的百分比，背景区由 background-origin 设置，宽度为 w a%，高度为 h b%，如果只设置一个值，则仅设置宽度，高度通过维持长宽比来确定
- 逗号分隔多个值，设置多重背景
background-position
为每一个背景图片设置初始位置，位置相对于由 background-origin 定义的图层
- 默认值：默认从 top left 处开始绘制
- 关键字：top、left、bottom、right、center
- 如果被定义为两个值，那么第一个值代表水平位置，第二个代表垂直垂直位置。如果只指定一个值，那么第二个值默认为 center。
- 百分比值：指定图片的相对位置和容器的相对位置重合
background-attachment
用于定义元素背景与元素内容的关系
- fixed：背景区为浏览器可视区，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
- local：相对于元素的内容固定，如果元素拥有滚动机制，背景将会随着元素的内容滚动
- scroll：相对于元素本身固定，而不是随着内容滚动
background-clip
对背景进行裁剪
- border-box
- padding-box
- content-box
- text：内容被裁剪成文字的前景色
background-origin
定义背景位置的起始点
- 当 background-attachment 为 fixed 时，该属性不起作用
- padding-box: 默认为盒模型的内容区与内边距
- content-box：只有内容区
- border-box：内容区与内边距，还包括边框
background-image
提供由逗号分隔的多个值来指定多个背景图像，可指定多个图形，先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
background-repeat
- repeat、no-repeat：会存在裁剪
- round：随着允许的空间在尺寸上的增长
- space：尽可能重复，但不裁剪
- 双值语法中, 第一个值表示水平重复行为, 第二个值表示垂直重复行为
🐷🐷🐷