背景background
- 背景颜色
- 背景图片(默认平铺,不好看)
- 背景平铺
- 背景起始位置
- 背景
###背景颜色background-color(背景颜色在背景图片的下面)
- 单词:red/green/blue
- RGB颜色: rgb(0,0,0)-rgb(255,255,255)
- RGBA颜色:rgba(0,0,0,0)-rgba(255,255,255,1)
- 十六进制颜色:#000 - #fff
- hsl h:色调 s: 饱和度 l: 亮度 色调 取值范围0-360
S:Saturation
饱和度 取值范围0%-100%L:Lightness
亮度 取值范围0%-100% - transparent 默认透明,不继承
- inherit 继承
- rgb(0,0,0)代表黑色,rgb(255,255,255)代表白色
背景图片background-image:url(‘图片地址’)
- 初始值为none
- inherit 继承
背景图片的格式说明
图片格式 | 特点 |
---|---|
jpg | 不支持动画,不支持透明,渐进显示颜色丰富,有损 |
png | 不支持动画,支持透明度,颜色更丰富,无损 |
gif | 支持动画,256种颜色,2种透明度(不透明,完全透明),渐进显示 |
webp | 支持动画,高压缩率,加载速率 |
PS.直接修改后缀名,是不行的
###背景图片重复/平铺background-repeat
背景图片默认平铺,方向从左上角到右下角
背景图片有两个方向,x轴和y轴
background-repeat: reapeat;/* 默认平铺 */
background-repeat: no-repeat;/* 不平铺,相当于是两个方向都不平铺 */
background-repeat: repeat-y;/* y轴/垂直方向平铺 */