07 - 背景background和圆角

背景background

1. 背景颜色
2. 背景图片(默认平铺,不好看)
3. 背景平铺
4. 背景起始位置
5. 背景

###背景颜色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轴/垂直方向平铺 */