写这篇水文呢，也是最近在自己在魔改一个主题用作新做的班级网站。

发现模版的背景图片以及其他地方的图片显示只能在电脑端看到，而在移动端不能够自适应。顺便也整理出来。

首先是图片的居中自适应：

需要先给CSS background-repeat 属性赋值no-repeat，使图片不重复只显示一张。

然后再定位背景图像位置，给CSS background-position 属性赋值center，设置水平和垂直都居中。

接下来就是图片尺寸了，给background-size属性赋值，并配合background-position-x和background-position-y赋值center来实现CSS背景图片background-image缩放后居中显示。

而background-size的赋值方法有多种：

1.给background-size属性赋值容器宽度和高度中的最小值，实现CSS背景图片缩放后居中显示。background-size:400px 200px;

2.给background-size属性赋值100%实现CSS背景图片缩放后居中显示。(这种赋值方法会导致图片非等比例缩放，也就是导致图片会适应容器的高宽比。)background-size:100% 100%;

3.通过background-size:contain实现CSS背景图片缩放后居中显示。(contain的优点是会保留背景图片的宽高比，不会被拉伸变形，所以适用于保留背景图片宽高比的需求中。)background-size:contain;

因为图片尺寸与容器大小不一样，所以我们采用第二个百分比适应的方法。

所以最终代码如下：body {

background-image: url(https://img.lkxin.cn/*****);

width:***px;

margin:**px auto -**px auto;

text-align: center;

padding:**px;

background-repeat: no-repeat;

background-position-x: center;

background-position-y: center;

background-size: 100% 100%；

color:#FFFFFF;

}

接下来是背景图以拉伸方式(不重复)填充背景

方法同上，同样利用background-repeat: no-repeat;和background-size: 100% 100%。

而不同的地方是上面使用的background-position属性的作用是定位，而接下来要用到background-attachment属性的作用是将其固定住，使其不滚动，不移位置。

那么就需要给background-attachment赋值fixed。background-attachment: fixed;

最终代码为：background-image: url(https://img.lkxin.cn/*****);

background-attachment: fixed;

background-repeat: no-repeat;

background-size: 100% 100%;

OK！文章结束.......

赞 0

原创文章，作者：清酒，如若转载，请注明出处：https://blog.lkxin.cn/archives/344.html