背景属性有以下这些
| 描述 | 属性 |
|---|---|
| 背景色 | background-color |
| 背景图 | background-image |
| 背景图平铺方式 | background-repeat |
| 背景图位置 | background-position |
| 背景图缩放 | background-size |
| 背景图固定 | background-attachment |
| 背景图复合属性 | background |
背景图
网页中使用背景图实现装饰性的图片效果
1
2
3
4
5
6
div {
width: 500px;
height: 300px;
background-image: url(./img/00.jpg);
}
背景图平铺方式
background-repeat 有四个值
| 效果 | 不平铺 | 平铺 (默认) | 水平方向平铺 | 垂直方向平铺 |
|---|---|---|---|---|
| 属性值 | no-repeat | repeat | repeat-x | repeat-y |
背景图位置
background-position 的值为 水平方向位置 垂直方向位置 其中位置的值有关键字和坐标
关键字有 left、right、center、top、bottom
坐标使用 数字+px，正负皆可
1
2
3
4
5
div {
background-position: center top;
/* 也可以数字和单词混用 */
/* background-position: -50px center; */
}
可以只写一个关键字，另一个方向为居中；数字只写一个为水平方向，垂直居中
背景图缩放
background-size 常用三种属性值
- 关键字
- cover：等比例缩放背景图片以完全覆盖背景区，可能图片部分看不见
- contain：等比例缩放背景图片以完全装入背景区，可能部分空白
- 百分比：根据盒子尺寸计算图片大小
- 数字+单位 (如 px)
百分比为 100% 时图片宽度和盒子宽度一致，高度等比例缩放
背景图固定
background-attachment 使背景不会随着元素的内容滚动，属性值为 fixed
背景图复合属性
background 属性值为 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 不区分顺序
1
2
3
4
5
6
div {
width: 500px;
height: 500px;
background: aqua url(./img/01.jpg) no-repeat center/cover;
}