CSS 图片平铺

1. 介绍

在 web 开发中，我们经常需要在页面上使用背景图片。有时候，我们希望这个背景图片能够平铺在某个元素上，以填满整个元素的区域。在 CSS 中，我们可以通过设置背景图片的平铺方式来实现这个效果。

本文将详细介绍 CSS 中关于图片平铺的属性，包括 background-repeat、background-size、background-position 等。我们将学习如何使用这些属性来实现不同的图片平铺效果。

2. 背景图片的默认平铺方式

在 CSS 中，默认情况下，背景图片是在元素的左上角开始平铺的。我们可以通过设置 background-repeat 属性来控制图片的平铺方式。

2.1 `background-repeat` 属性

background-repeat 属性用于设置背景图片的平铺方式，有以下几个可选值：

repeat：默认值。背景图片在水平和垂直方向上都重复平铺。
repeat-x：背景图片只在水平方向上重复平铺。
repeat-y：背景图片只在垂直方向上重复平铺。
no-repeat：背景图片不平铺，只显示一次。

以下是一个示例代码，展示了不同 background-repeat 属性值对背景图片的影响：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 400px;
      height: 200px;
      background-image: url("background.jpg");
      background-repeat: repeat;
    }
    .container-1 {
      background-repeat: repeat-x;
    }
    .container-2 {
      background-repeat: repeat-y;
    }
    .container-3 {
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="container"></div>
  <div class="container container-1"></div>
  <div class="container container-2"></div>
  <div class="container container-3"></div>
</body>
</html>

上述代码中，.container 类定义了一个普通的背景图片平铺效果。.container-1 类设置背景图片只在水平方向上重复平铺。.container-2 类设置背景图片只在垂直方向上重复平铺。.container-3 类则设置背景图片不平铺。

2.2 `background-size` 属性

除了控制图片的平铺方式，有时候我们还希望背景图片能够适应元素的大小。此时，可以使用 background-size 属性来调整背景图片的尺寸。

background-size 属性有以下几种取值：

auto：默认值。背景图片按照原始大小显示。
length：指定背景图片的尺寸为具体的长度值，如 background-size: 100px 200px;。
percentage：设置背景图片的尺寸为相对于元素的百分比，如 background-size: 50% 100%;。
cover：保持图片比例，并将背景图片缩放到填满元素的整个区域。可能会被裁剪。
contain：保持图片比例，并将背景图片缩放到能够完整显示在元素内部。

以下是一个示例代码，展示了不同 background-size 属性值对背景图片的影响：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 400px;
      height: 200px;
      background-image: url("background.jpg");
      background-repeat: no-repeat;
      background-size: auto;
    }
    .container-1 {
      background-size: 100px 100px;
    }
    .container-2 {
      background-size: 50% 50%;
    }
    .container-3 {
      background-size: cover;
    }
    .container-4 {
      background-size: contain;
    }
  </style>
</head>
<body>
  <div class="container"></div>
  <div class="container container-1"></div>
  <div class="container container-2"></div>
  <div class="container container-3"></div>
  <div class="container container-4"></div>
</body>
</html>

上述代码中，.container 类设置背景图片按照原始大小显示。.container-1 类指定了背景图片的尺寸为 100px * 100px。.container-2 类设置了背景图片的尺寸为元素宽度和高度的 50%。.container-3 类设置背景图片按照 cover 方式显示。.container-4 类设置背景图片按照 contain 方式显示。

通过设置 background-size 属性，我们可以灵活地调整背景图片的尺寸。