下定决心还是再学一遍 CSS 等前端知识
1. background
1.1 background-image
- 用于设置元素的背景图片
- 会盖在（不是覆盖）background-color 的上面
- 如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
- 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
1.2 background-repeat
1.3 background-size
- auto: 默认值，以背景图本身大小显示
- cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见
- contain：
<percentage>- Length
1.4 background-position
- 用于设置背景图片在水平，垂直方向上的具体位置
- 可以设置具体的数值，比如 20px 30px
- 水平方向还可以设值：left, center, right
- 垂直方向还可以设值: top, center, bottom
- 如果只设置了一个方向，另一个方向默认是 center
1.5 background- attachment
- 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
- 可以设置以下三个值
- scroll：表示背景相对于元素本身固定，而不是随着它的内容滚动
- local：表示背景相对于元素的内容固定，如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
- fixed
1.6 缩写属性
1.7 background-image vs. img
| img | background-image | |
|---|---|---|
| 性质 | HTML 元素 | CSS 样式 |
| 图片是否占用空间 | ✅ | ❌ |
| 浏览器右键直接查看地址 | ✅ | ❌ |
| 支持 CSS Sprite（精灵图） | ❌ | ✅ |
| 更有可能被搜索引擎收录 | ✅（结合 alt 属性） | ❌ |