图片路径与引入
background-image: url("~@/路径");
background-image: url("~@/images/bg.jpg");
图片大小调整
- 具体数值：指定宽高。
- 百分比：按图片自身大小的百分比显示，100% 表示原图大小。
- cover：宽高比不变，图片缩放为刚好覆盖背景区域的最小大小。
- contain：宽高比不变，图片缩放为适合背景区域的最大大小。
background-size: 100px 100px; /* 可以只设置一个数值，未设置的值默认为 auto */
background-size: 100% 100%; /* 可以只设置一个数值，未设置的值默认为 auto */
background-size: cover;
background-size: contain;
图片是否重复
background-repeat属性用于设置背景图像的平铺方式。
repeat：水平垂直方向重复平铺。no-repeat：不平铺，只显示一次。repeat-x：水平方向重复平铺。repeat-y：垂直方向重复平铺。
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
图片位置调整
x和y坐标：代表图片左上角相对于背景的偏移量。- 方位名词：如
top、center、bottom、left、right。 - 精确单位参数值：如
length、百分比。
background-position: 10px 20px; /* x坐标和y坐标 */
background-position: top center; /* 方位名词 */
background-position: 50% 50%; /* 百分比 */
背景图片滚动
background-attachment属性用于设置背景图像是否固定或者随着页面的其余部分滚动。
scroll：背景图像随着对象内容滚动。fixed：背景图像固定。
background-attachment: scroll;
background-attachment: fixed;