如何只拉伸CSS背景图片的下半部分来填充容器？

在CSS中，背景图片默认是平铺或拉伸整个容器的。如果你只想拉伸背景图片的下半部分来填充容器，可以通过以下步骤实现：

1. 使用 background-position 和 background-size

你可以通过设置 background-position 和 background-size 来控制背景图片的显示区域。

.container {
  width: 100%;
  height: 300px; /* 容器的高度 */
  background-image: url('your-image.jpg');
  background-position: center bottom; /* 将背景图片定位到容器的底部 */
  background-size: 100% 50%; /* 拉伸背景图片的高度为容器高度的50% */
  background-repeat: no-repeat;
}

2. 使用伪元素

如果你需要更复杂的控制，可以使用伪元素来实现。

.container {
  position: relative;
  width: 100%;
  height: 300px; /* 容器的高度 */
  overflow: hidden;
}

.container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* 只显示图片的下半部分 */
  background-image: url('your-image.jpg');
  background-size: 100% 200%; /* 拉伸背景图片的高度为容器高度的200% */
  background-position: center bottom;
}

3. 使用 clip-path

你还可以使用 clip-path 来裁剪背景图片的下半部分。

.container {
  width: 100%;
  height: 300px; /* 容器的高度 */
  background-image: url('your-image.jpg');
  background-size: 100% 200%; /* 拉伸背景图片的高度为容器高度的200% */
  background-position: center bottom;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

解释

• background-position: center bottom; 将背景图片的底部对齐容器的底部。
• background-size: 100% 50%; 将背景图片的高度拉伸为容器高度的50%，这样只有下半部分会被显示。
• clip-path 可以用来裁剪元素的显示区域，只显示下半部分。

注意事项

• 确保背景图片的分辨率足够高，以避免拉伸后出现模糊。
• 如果背景图片的比例与容器不匹配，可能需要调整 background-size 的值。

通过这些方法，你可以实现只拉伸背景图片的下半部分来填充容器的效果。