目录
背景属性
属性 | 描述 |
---|---|
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
背景复合属性
属性值:背景色 背景图 背景图平铺方式 背景图位置/缩放 背景图固定(属性值之间空格隔开,不区分先后顺序)