css背景

1
2
3
background-repeat: no-repeat;
/* 这种写法一般是 超大背景图片的做法 背景定位 */
background-position: center top;

背景附着
解释背景是滚动的还是固定的
语法:

1
background-attachment: scroll || fixed

参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

背景简写
background: 属性的值的书写顺序官方并没有强制标准。为了可读性,建议如下写:
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: background-color background-image background-repeat background-attachment background-position;
语法:

1
background: transparent url(image.jpg) repeat-y scroll center top;

背景总结
| 属性 | 作用 | 值 |
| - | - | - |
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x和y坐标,切记如果有精确数值单位,则必须按照先x后y的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片 背景平铺 背景滚动 背景位置; 它们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是4个值 |