背景图显示完全的方法
1. 问题描述
在网页设计中，经常会使用背景图作为网页的背景，但是由于各种原因（如图片不规则、分辨率不同等），背景图可能显示不完整或者出现重叠的情况，影响网页的美观度。那么如何让背景图显示完整呢？
2. 解决方法
实现背景图显示完整并不难，只需要使用CSS的background-size属性即可。
background-size属性用于设置背景图的大小，它支持多种单位（如px、em、%等），常用的有两种取值方式：
- contain：将背景图缩放成不超过容器大小的最大尺寸，并保持纵横比。
- cover：将背景图缩放成刚好覆盖容器的尺寸，并保持纵横比。
下面分别介绍这两种方式的使用方法。
3. 使用contain方式
通过使用contain方式，可以将背景图缩放到不超过容器大小的最大尺寸，并在水平和垂直方向上居中显示。
下面是使用contain方式的CSS代码示例：
.background {
background-image: url("image.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
接下来对上述代码进行解释：
- background-image属性：用于引用背景图片。
- background-size属性：设置背景图片的大小，此处取值为contain。
- background-repeat属性：设置背景图片不重复，否则图片会重复出现。
- background-position属性：此处为了水平和垂直居中，将其设置为center center。
使用contain方式后，背景图就能够完整地显示在容器中了，如下图所示：
4. 使用cover方式
通过使用cover方式，可以将背景图缩放到刚好覆盖容器的尺寸，并保持纵横比。
下面是使用cover方式的CSS代码示例：
.background {
background-image: url("image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
接下来对上述代码进行解释：
- background-image属性：用于引用背景图片。
- background-size属性：设置背景图片的大小，此处取值为cover。
- background-repeat属性：设置背景图片不重复，否则图片会重复出现。
- background-position属性：此处为了水平和垂直居中，将其设置为center center。
使用cover方式后，背景图将刚好覆盖容器，如下图所示：
5. 总结
使用CSS的background-size属性可以解决背景图片显示不完整或者出现重叠的问题。通过控制background-size属性的取值方式（contain或者cover），可以让背景图完整地显示在容器中。在实际页面设计中，可以根据具体需求选择使用哪种方式，以达到最佳的效果。
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
https://www.w3schools.com/cssref/css3_pr_background-size.asp