CSS CSS – 如何水平拉伸背景图片并垂直平铺

在本文中，我们将介绍如何使用CSS实现水平拉伸背景图片并在垂直方向上进行重复平铺的效果。这个技术可以让我们在网页设计中更加灵活地使用背景图片来实现各种效果。

阅读更多：CSS 教程

使用background-size属性进行水平拉伸

要实现水平拉伸背景图片的效果，我们可以使用CSS的background-size属性。该属性可以设置背景图片的尺寸大小，通过设置宽度为100%来实现图片在水平方向上充满整个容器的效果。

.background-image {
  background-image: url('image.jpg');
  background-repeat: repeat-y;
  background-size: 100% auto;
}

在上面的示例中，我们设置了一个类名为”.background-image”的样式，并指定了背景图片的URL。background-repeat属性被设置为”repeat-y”，这样背景图片在垂直方向上会重复平铺。

通过设置background-size为”100% auto”，我们将背景图片的宽度设置为了容器的100%，这样就可以实现水平拉伸的效果。

示例演示

下面的示例演示了如何使用这个技术实现水平拉伸背景图片并垂直平铺的效果：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 600px;
  height: 400px;
  background-image: url('image.jpg');
  background-repeat: repeat-y;
  background-size: 100% auto;
}
</style>
</head>
<body>

<div class="container">
  <!-- Content goes here -->
</div>

</body>
</html>

在上面的示例中，我们创建了一个容器，并为其设置了一个类名为”.container”的样式。在样式中，我们设置了容器的宽度为600px，高度为400px，并指定了背景图片的URL。

通过设置background-repeat为”repeat-y”，背景图片在垂直方向上会重复平铺，使得整个容器都能显示出背景图片。而通过设置background-size为”100% auto”，背景图片会在水平方向上被拉伸以充满整个容器。

在示例中，我们只演示了一个容器的效果，你可以通过添加多个容器来实现更复杂的页面布局。