CSS 背景图平铺与间距

在本文中，我们将介绍CSS中关于背景图平铺与间距的相关知识。CSS中的background-repeat属性和background-position属性可以很好地控制背景图的平铺方式和设置背景图与边框之间的间距。

阅读更多：CSS 教程

CSS background-repeat属性

CSS的background-repeat属性用于设置背景图的平铺方式，常用的属性值有以下几种：

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

示例如下：

body {
  background-image: url("bg-image.jpg");
  background-repeat: repeat;
}

上述示例中，bg-image.jpg是背景图的文件路径，repeat表示背景图在水平和垂直方向上平铺重复。

CSS background-position属性

CSS的background-position属性用于设置背景图相对于元素的位置，常用的属性值有以下几种：

top：背景图在元素的上方居中；
bottom：背景图在元素的下方居中；
left：背景图在元素的左边居中；
right：背景图在元素的右边居中；
center：背景图在元素的中心位置；
x% y%：使用百分比设置背景图的位置，相对于元素的宽度和高度。

示例如下：

div {
  background-image: url("bg-image.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

上述示例中，bg-image.jpg是背景图的文件路径，no-repeat表示背景图不平铺重复，center表示背景图相对于元素居中显示。

背景图平铺与间距示例

下面我们通过示例来演示如何使用CSS的background-repeat属性和background-position属性来控制背景图的平铺方式和间距。

首先，我们创建一个HTML文件，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>CSS背景图平铺与间距示例</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 400px;
      height: 200px;
      margin: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      background-image: url("bg-image.jpg");
      background-repeat: repeat;
      background-position: center;
    }
    .container2 {
      width: 400px;
      height: 200px;
      margin: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      background-image: url("bg-image.jpg");
      background-repeat: no-repeat;
      background-position: left bottom;
    }
    .container3 {
      width: 400px;
      height: 200px;
      margin: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      background-image: url("bg-image.jpg");
      background-repeat: repeat-y;
      background-position: right top;
    }
  </style>
</head>
<body>
  <div class="container">
    这是一个使用repeat平铺的背景图示例
  </div>
  <div class="container2">
    这是一个使用no-repeat和left bottom定位的背景图示例
  </div>
  <div class="container3">
    这是一个使用repeat-y和right top定位的背景图示例
  </div>
</body>
</html>

上述示例中，我们创建了三个具有不同背景图平铺方式和间距的容器，分别是使用repeat平铺的背景图示例、使用no-repeat和left bottom定位的背景图示例、使用repeat-y和right top定位的背景图示例。

通过在<style>标签中设置相应的CSS样式，我们可以看到三个容器分别展示了不同的背景图平铺方式和间距效果。