六、背景相关属性
1.1 背景颜色
- 属性名: background-color (bgc)
- 属性值：
- 颜色取值:关键字、rgb表示法、rgba表示法、十六进制......
- 注意点：
- 背景颜色默认值是透明： rgba(0,0,0,0)、transparent
- 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
1.2 小结
- 背景颜色属性的属性名是？
- background-color
- 背景颜色属性的属性值默认是?
- 透明：rgba(0,0,0,0)、transparent
2.1 背景图片
- 属性名: background-image (bgi)
- 属性值: background-image: url('图片的路径');
- 注意点：
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
2.2 小结
- 背景图片属性的属性名是？
- background-image
- 背景图片属性的属性值格式是什么样的？
- background-image: url('图片的路径');
3.1 背景平铺
- 属性名: background-repeat (bgr)
- 属性值：
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着垂直方向（x轴）平铺 |
| repeat-y | 沿着垂直方向（y轴）平铺 |
3.2 小结
- 背景平铺属性的属性名是？
- background-repeat
- 背景平铺属性的属性值常见的有哪些？
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着垂直方向（x轴）平铺 |
| repeat-y | 沿着垂直方向（y轴）平铺 |
4.1 背景位置
- 属性名: background-position (bgp)
- 属性值： background-position: 水平方向位置 垂直方向位置;
- 注意点： 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
4.2 小结
- 背景位置属性的属性名是？
- background-position
- 背景位置属性的取值有哪些？
5.1 背景相关属性的连写形式
- 属性名: background (bg)
- 属性值：
- 单个属性值的合写，取值之间以空格隔开
- 书写顺序：
- 推荐: background: color image repeat position
- 省略问题：
- 可以按照需求省略
- 特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写 background: urlO
- 注意点
- 如果需要设置单独的样式和连写
- ①要么把单独的样式写在连写的下面
- ②要么把单独的样式写在连写的里面
5.2 小结
- 背景相关属性连写的属性名是？
- background
- 背景相关属性连写的取值的写法是？
- 单个属性值的合写，取值之间以空格隔开
- 推荐: background: color image repeat position
6.1 (拓展) img标签和背景图片的区别
- 需求:需要在网页中展示一张图片的效果?
- 方法一：直接写上img标签即可
- img标签是一个标签,不设置宽高默认会以原尺寸显示
- 方法二：div标签 + 背景图片
- 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签