CSS背景设置
通过CSS背景属性，可以给页面元素添加背景样式
一、背景颜色
background-color 定义元素的背景颜色
在vscode中可以简写快捷键：bgc+回车
PS：元素背景颜色默认值为：transparent（透明）
背景颜色
二、背景图片
background-image 定义元素的背景图片
背景图片
其他说明：
实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。
三、背景平铺
background-repeat 设置元素背景图像的平铺
为了方便演示，我给图片添加了边框和外边距，来显示div盒子的大小
1、背景图片不平铺
背景图片平铺
2、背景图片沿着y轴平铺
3、背景颜色沿着x轴平铺
4、背景图片平铺
四、 背景图片位置
background-position 属性可以改变图片在背景中的位置
参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
背景位置-方位名词
成长守护平台
其他说明：
1、参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2、参数是精确单位
如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
五、精确单位
background-position
背景位置-方位名词
六、混合单位
背景位置-方位名词
七、固定背景图片
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
背景位置-方位名词
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
天王盖地虎, 大奉打更人
其他说明：
background-attachment 后期可以制作视差滚动的效果。
八、背景样式合写
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
九、背景颜色半透明
最后一个参数是 alpha 透明度，取值范围在 0~1之间
习惯将0去掉，直接写小数点后面的数字，如0.3可以直接写为 .3
-
背景半透明是指盒子背景半透明，盒子里面的内容不受影响
-
CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
背景色透明写法
隐形的翅膀
