HTML(12)——背景属性
目录
背景属性
背景图
背景图平铺方式
背景图位置
背景图缩放
背景图固定
背景属性
| 属性 | 描述 |
|---|---|
| background-color | 背景色 |
| background-image (bgi) | 背景图 |
| background-repeat (bgr) | 背景图平铺方式 |
| background-position (bgp) | 背景图位置 |
| background-size (bgz) | 背景图缩放 |
| background-attachment (bga) | 背景图固定 |
| background | 背景复合属性 |
背景图
使用背景图实现装饰性的图片效果。
属性值:url(背景图URL)
背景图默认是平铺的效果
背景图平铺方式
| 属性值 | 效果 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺 |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
背景图位置
属性值：水平方向位置，垂直方向位置
关键字
| 关键字 | 位置 |
|---|---|
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| button | 底部 |
关键字取值写法，可以颠倒顺序
坐标：数字+px 正负都可
可以只写一个关键字，另外一个方向默认居中，坐标只写一个表示水平方向，垂直方向为居中
背景图缩放
常用属性值
- 关键字
cover：等比缩放背景图片以完全覆盖背景区，可能背景图部分看不见
contain：等比缩放背景图片以完全装入背景区，可能背景区部分空白
- 百分比：根据盒子尺寸计算图片大小
- 数字+单位
背景图固定
作用：背景图不会随着元素的内容滚动
属性值：fixed
背景复合属性
属性值：背景色 背景图 背景图平铺方式 背景图位置/缩放 背景图固定（属性值之间空格隔开，不区分先后顺序）