CSS必知！background复合属性顺序总结

属性作⽤值
background-color lor 背景颜⾊预定义的颜⾊值/⼗六进制/RGB代码
background-image背景图⽚none（⽆背景图，默认的）
url（）使⽤绝对或相对地址指定背景图像
background-repeat背景平铺background-repeat:repeat|no-repeat|repeat-x|repeat-y repeat(默认)
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺
background-position背景图⽚位置background-position：x y;
可以使⽤⽅位名词或精确单位
length:百分数|由浮点数和单位标识符组成的长度值position：top|bottom|left|right|centerl
background-attachment背景图像固定（背景图⽚附着）background-attachment:fixed|scroll scroll背景图像随对象内容滚动fixed背景图像固定
CSS必知！background复合属性顺序总结css背景总结
背景复合写法
background：背景颜⾊背景图⽚地址背景平铺背景图像滚动背景图⽚位置
【拓展】
1、背景⾊半透明
background:rgba(0,0,0,0.3)
最后⼀个参数alpha透明度，取值范围在0-1之间
我们习惯把0.3的0省略掉，写为background:rgba(0,0,0,.3)
注意：背景半透明是指盒⼦背景半透明，盒⼦⾥⾯的内容不受影响
css3新增属性，IE9+版本浏览器才⽀持，但实际开发中不太关注兼容性写法可放⼼使⽤
2、背景图⽚的⼤⼩
1 background-size:auto;/* 默认值，不改变背景图⽚的⾼度和宽度 */
2 background-size:100px 50px;/* 第⼀个值为宽，第⼆个值为⾼，当设置⼀个值时，将其作为图⽚宽度来等⽐缩放 */
3 background-size:10%;/* 0％~100％之间的任何值，将背景图⽚宽⾼按百分⽐显⽰，当设置⼀个值的时候同也将其作为图⽚宽度来等⽐缩放 */
4 background-size:cover;/* 将背景图⽚等⽐缩放填满整个容器 */
5 background-size:contain;/* 将背景图⽚等⽐缩放⾄某⼀边紧贴容器边缘 */。