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

css的背景总结

 

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/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背景图像固定

 

背景复合写法：

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;/* 将背景图片等比缩放至某一边紧贴容器边缘 */