设置背景图片样式
背景图片取消重复
background-image: url(image.jpg);
background-repeat:no-repeat;
- 1
- 2
修改前
修改后
背景图片固定（不会随着内容滚动而改变位置）
background-image: url(image.jpg);
background-attachment:fixed;
- 1
- 2
背景图片居中显示
垂直水平居中
background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center center;
- 1
- 2
- 3
水平方向居中 垂直方向向上
background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center top;
- 1
- 2
- 3
水平方向向右 垂直方向向下
background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:right bottom;
- 1
- 2
- 3
背景图片等比例拉伸
background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: auto 100%;
/* background-size: 100% auto; */
- 1
- 2
- 3
- 4
或根据高度进行拉伸
还可以使用 cover 自动等比例拉伸图片
background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: cover;
- 1
- 2
- 3
背景图片拉伸（会扭曲图片）
background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
- 1
- 2
- 3
参考：https://blog.csdn.net/guoqing2016/article/details/93641636
