背景属性样式
🍓背景属性
| 属性名称 | 中文注释 | 备注 |
|---|---|---|
background-image | 背景图片 | url(img-path) |
background-color | 背景颜色 | |
background-attachment | 设置背景固定 | scroll默认值，随盒子滚动， fixed固定，脱离标准流，固定在浏览器窗口，当背景图片不在盒子的显示范围之内，图片将不会展示 |
background-repeat | 背景平铺 | repeat-x横向平铺， repeat-y纵向平铺， no-repeat不平铺 |
background-position | 设置背景图片的位置 | 第一个值是水平位置，第二个值是垂直的位置，起点0 0是图片与容器左上角对齐(注意：这是背景图片没有被设置成fixed的情况，设置成fixed则会相对于整个页面窗口设置位置) |
background-size | 设置背景图片大小 | - 两个值宽，高，设置这个可能会导致图片失真 - cover图片等比例放大，全部覆盖容器，但是图片超过的部分不显示- contain图片等比例放大，尽量覆盖容器，但是不会以图片失真为代价覆盖整个容器，所以可能会有部分地区不能完全覆盖 |
background | 背景缩写 | 可以合并background-color、background-image、background-repeat、background-position、background-attachment，没有固定的顺序，任何属性都能省略，但是省略会覆盖你前面这些属性设置的值，不能合并background-size |