这是我参与更文挑战的第8天，活动详情查看 更文挑战

页面设计的时候，设计师经常会给页面加上漂亮的背景图。代码实现的时候，我们既希望能够实现屏幕自适应，又希望不会变形，而且背景图还需要不随滚动条的滚动而滚动。那这要做么做呢？让我们一起来看看吧！（代码在最后可直接复制使用！）

background知识点

background图解分析

处理重复问题

background-repeat:no-repeat;

处理前

宽高不足的地方，被图片重复铺满了

处理后

处理完后，宽高不足的地方会出现留白

处理图片位置问题

垂直水平

background-position:center center;

上左

background-position:top left;

下右

background-position:bottom right;

处理图片拉伸问题(以居中为例)

横向拉伸

background-size:100% auto;

纵向拉伸

 background-size:auto  100%;

等比例拉伸（会截取图片）

背景图片放大到适合元素容器的尺寸，图片比例不变，但某些部分被切割无法显示完整背景图像

background-size: cover;

图片拉伸（图片会扭曲）

按容器比例撑满，会看到完整的背景图片，但是图片会变形

background-size: 100% 100%;

设置全屏图片（代码）

方案一：图片比例不变，但是有可能显示不全

.bg{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;/*min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变,缩放屏幕宽度时，图片不要缩放*/
    z-index:-10;/*因为背景图片应该放在最下方，所以设置一个层级*/
    zoom: 1;
    background: url("img/b8c22095eda02839c25ae158843c6aa1.jpeg") no-repeat center center ;/*背景图路径 背景图不平铺 背景图垂直、水平均居中 */
    background-size:cover; /* ---把背景图片放大到适合元素容器的尺寸，图片比例不变，但某些部分被切割无法显示完整背景图像 */
    background-attachment:fixed; /* 当内容高度大于图片高度时，背景图像的位置相对于 可视窗口 固定，此条属性必须设置 */
}

方案二：图片撑满容器，但是图片可能变形

.bg{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;/*min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变,缩放屏幕宽度时，图片不要缩放*/
    z-index:-10;/*因为背景图片应该放在最下方，所以设置一个层级*/
    zoom: 1;
    background: url("img/b8c22095eda02839c25ae158843c6aa1.jpeg") no-repeat center center ;/*背景图路径 背景图不平铺 背景图垂直、水平均居中 */
    background-size:100% 100%; /* ---按容器比例撑满，图片变形；*/
    background-attachment:fixed; /* 当内容高度大于图片高度时，背景图像的位置相对于 可视窗口 固定，此条属性必须设置 */
}

---

小可爱看完就点个赞再走吧！🤞🤞🤞