一篇文章教你弄懂CSS背景图

在网络中经常看到大家写出如下这段示例的CSS代码，说是为了处理图片完全平铺整个手机页面。

background: url('/static/logo.png') no-repeat;
background-size: 100% 100%;

这代码不知道是那个没水平的在网络上散播出来的，而且还大受“好评”，简直离谱！！！

上述的代码看着逻辑满分，其实有着非常低级的错误。看下图

 从上图可以看出，当容器与图片的尺寸不匹配时，图片发生了明显的形变。恰好用户的手机尺寸比例都是各不相同的，所以这是一个明显的BUG。

要解决上叙的问题，那么CSS设置背景图应该怎么写。借用小程序 <image> 组件的 mode 属性为参考为来实现一下。

微信小程序 <image> 文档链接：image | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/image.html

mode = "scaleToFill"

定义：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

这个方式的结果就是 background-size: 100% 100%; 的结果，所以在写小程序时，image 的 mode 值一定要重新设置。

mode = "aspectFit"

定义：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

CSS代码：

background-size: contain;

mode = "aspectFill"

定义：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。—— 这是使用频率最高的一种方式

CSS代码：

background-size: cover;

mode = "widthFix"

定义：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

CSS代码：

background-size: 100% auto;

mode = "heightFix"

定义：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

CSS代码：

background-size: auto 100%;

设置 background-size 属性正确的方式基本为 contain、cover、100% auto、auto 100% 这四种方式，具体使用可根据图片的主内容区域来决定。

关于CSS背景图除了设置缩放外，裁剪也是一个常用到的属性，大家可以参考 小程序的 图片组件 mode 中有关于裁剪的属性自行测试，与CSS相对应的属性是 background-position。

最后给大家一个我推荐的CSS设置背景图必写的几个属性

/* 图片路径 */
background-image: url('/static/demo.jpg');
/* 不平铺 */
background-repeat:  no-repeat;
/* 居中显示 */
background-position: center;
/* 拉伸占满整个容器 */
background-size: cover;

推荐大家有关于设置背景的属性都单独写明每一个用到的具体属性名，不推荐大家直接用 background 这个复合属性。原因有以下两点：

1. 导致相同类型的属性风格不统一，因为background 是CSS1的版本，而 background-size 是CSS3版本的属性。没法只通过一个 background 来写完。CSS3所诞生的属性就是为了处理移动平台下尺寸无法固定的问题而生的，所以每一个设置背景图的地方，在移动端而言 background-size 也是必定义的。
2. 阅读性差，如果说有关于CSS盒子模型的属性我们都能知道4个值的顺序是 上 右 下 左，如果是 background 属性，我们很难一眼看出他的每一个属性对应的具体属性名称。单独写能更好提高阅读性及在工作中覆盖具体的属性值。

比如在做一个图片图标的通用类可以按下方示例的代码写：

background-repeat:  no-repeat;
background-position: center;
background-size: contain;

定义图标的基本的定位和缩放后，具体的图标类名只需要定义 图片的地址和尺寸即可。为什么设置图标不能使用 background-size: cover; 因为图标肯定是需要完整显示的，不能发生裁剪的情况。

在CSS3除了通过 background-size 的方式对图片进行缩放外，还可以通过 object-fit 属性进行缩放，这个属性是相当Nice。

object-fit 属性文档https://www.runoob.com/cssref/pr-object-fit.htmlhttps://www.runoob.com/cssref/pr-object-fit.html最后，求大家别再写 background-size: 100% 100%; 这种沙雕代码了好吗？

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

本文原创，著作权归作者所有，转载请注明原链接及出处