css 背景图片自适应属性整理

本篇博客主要记录一些使用 css 对背景图片自适应的操作整合

背景图片取消重复

background-image: url(image.jpg);
background-repeat:no-repeat;

修改前

修改后

背景图片固定（不会随着内容滚动而改变位置）

background-image: url(image.jpg);
background-attachment:fixed;

背景图片居中显示

垂直水平居中

background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center center;

水平方向居中 垂直方向向上

background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:center top;

水平方向向右 垂直方向向下

background-image: url(image.jpg);
background-repeat:no-repeat;
background-position:right bottom;

背景图片等比例拉伸

background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: auto 100%;
/* background-size: 100% auto; */

或根据高度进行拉伸

还可以使用 cover 自动等比例拉伸图片

background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: cover;

背景图片拉伸（会扭曲图片）

background-image: url(image.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;