美化背景

Posted 2022-12-31 muxi95

1、【background-image】设置背景图片；

2、【background-repeat】设置图片重复方式；

? 【repeat】默认值，从左到右从上到下重复；

? 【no-repeat】不重复；

? 【repeat-x】仅在x轴方向上重复；

? 【repeat-y】仅在y轴方向上重复。

3、background-position】设置图片在边框盒中的具体位置。

预设值left、right、top、bottom、center

比如：background-position：center（水平垂直居中）；center top（水平居中）；left bottom（左边下边）；50px 100px（图片距离左边50，上边100）

雪碧图那个是指一个大的背景里面只需要小部分背景，其他的不要，通过设置盒子的大小和移动背景图的位置来保留想要的区域。

4、【background-size】设置背景图尺寸；

? Background-size：contain；等比例缩放图片，不管盒子，可以不覆盖盒子；

? Background-size：cover；图片大小等比例缩放，但是必须覆盖整个盒子。

5、【background-attachment】固定背景图

? Scroll：默认值，背景图跟随元素移动；

? Fixed：背景图固定。

6、速写【background】统一设置