CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

1.背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者时超大的背景图片，优点是非常便于控制位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3EWYnihF-1627359979654)(F:\learn_note\723CSS元素显示背景\image-20210723175640770.png)]

2.背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性

background-repeat ：repeat | no-repeat | repeat-x | repeat-y

默认平铺

3.背景图片位置

利用background-position属性可以改变图片在背景中的位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEhD9Jyy-1627359979655)(F:\learn_note\723CSS元素显示背景\image-20210723180917894.png)]

1.参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left效果一致
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2.参数是精确单位

• 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
• 如果只指定一个数值，那该数值一点是x坐标，另一个默认垂直居中

3.参数是混合单位

• 第一个值是x坐标，第二个值是y坐标

4.背景图像固定（背景附着)

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment可以做一些视差滚动的效果

background-attachment ：scroll | fixed

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

5.背景的复合写法

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4JGQwgKz-1627359979657)(F:\learn_note\723CSS元素显示背景\1627094324101.png)]

6.背景色半透明

background：rgb (0, 0, 0, 0.3);

• 最后一个参数是alpha透明度，取值范围在0~1之间
• 习惯把 0.3 的 0 省略掉 ， 写为 background ： rgba（0,0,0，.3);
• 只是让盒子背景半透明，内容不受影响
• IE9+版本以上支持

7.总结

属性	作业	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repea/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和y 坐标
background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
背景简写	书写更简单	背景颜色 背景图片 背景平铺 背景滚动 背景位置
背景色半透明	背景颜色半透明	background：rgba（0,0,0,0.3）；后面必须是4个值

背景位置 |
| 背景色半透明 | 背景颜色半透明 | background：rgba（0,0,0,0.3）；后面必须是4个值 |