1. 问题描述
在使用CSS为`<div>`元素设置背景图像时，有时候会发现背景图像未能完全显示到`<div>`元素的100％高度，可能只显示了部分图像，而不是铺满整个元素的背景。这是一个常见的问题，但幸运的是，有几种方法可以解决这个问题。
2. 方法一：使用`background-size`属性
要解决背景图像未显示完全的问题，可以使用CSS的`background-size`属性。该属性用于控制背景图片的大小，包括属性值`cover`和`contain`。
* `background-size: cover`会缩放图像以填充整个元素，并保持其纵横比。但是，这可能会导致图像的某些部分被裁剪掉。
* `background-size: contain`会缩放图像以适应元素的尺寸，但是可能会在元素的背景之间留下一些空白。
在这种情况下，您可以尝试将`background-size`属性设置为`100% 100%`，以确保背景图像填充整个元素：
.div-class {
background-size: 100% 100%;
}
3. 方法二：使用`background-position`属性
如果您不希望改变背景图像的大小，而只是想调整其在元素中的位置，可以使用CSS的`background-position`属性。
通过设置`background-position`属性的值，您可以将背景图像相对于元素的左上角、右上角、左下角或右下角进行偏移。例如，您可以使用以下代码将背景图像向下偏移50像素：
.div-class {
background-position: center 50px;
}
4. 方法三：使用`background-repeat`属性
默认情况下，背景图像将在元素中重复平铺，以填充整个元素。但是，如果您希望背景图像不被重复平铺，可以使用CSS的`background-repeat`属性。
将`background-repeat`属性的值设置为`no-repeat`，即可确保背景图像不会被重复平铺：
.div-class {
background-repeat: no-repeat;
}
5. 结论
通过使用CSS的`background-size`、`background-position`和`background-repeat`属性，我们可以解决背景图像未显示100％高度的问题。根据具体情况选择适当的方法，并根据需要进行调整。
请注意，以上的解决方案可能需要根据具体的CSS样式和布局进行调整，以达到最佳的视觉效果。