css 背景图片平铺技巧

今天我来为大家详细讲解一下“CSS背景图片平铺技巧”。

什么是 CSS 背景图片平铺

CSS 可以通过 background 属性设置 HTML 元素的背景，其中 background-image 属性可以设置背景图片，背景图片默认是不铺满整个 HTML 元素的。

如果需要让背景图片铺满整个 HTML 元素，就需要用到 CSS 背景图片平铺技巧。

如何实现 CSS 背景图片平铺

设置背景图片的重复类型为 repeat 或 repeat-x

使用 background-repeat 属性设置背景图片在水平方向上铺满整个 HTML 元素，可将 background-repeat 的属性值设置为 repeat 或 repeat-x，其中 repeat 表示在水平和垂直两个方向上都重复，repeat-x 表示在水平方向上重复。

例如：

body {
  background-image: url(example.png);
  background-repeat: repeat;
}

设置背景图片的填充方式为 cover

如果不想让背景图片在水平或垂直方向上重复，可以将 background-size 属性设置为 cover，让背景图片铺满 HTML 元素。

例如：

body {
  background-image: url(example.png);
  background-repeat: no-repeat;
  background-size: cover;
}

示例说明

以下是两个例子，用来演示如何使用 CSS 背景图片平铺技巧，更加直观形象：

示例1：使用repeat-x让图片在水平方向上平铺

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
  </body>
</html>

通过添加 background-image 和 background-repeat 属性，我们可以轻松让背景图片在水平方向上重复平铺显示。

示例2：使用cover铺满整个HTML元素

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
  </body>
</html>

通过添加 background-size: cover; 属性，我们可以让背景图片完全铺满整个HTML元素。

小结

以上是关于 CSS 背景图片平铺技巧的详细攻略，通过两个实例的演示，相信大家已经十分清楚如何平铺背景图片了。如果还有不清楚的地方，欢迎留言，我来和大家一起学习进步。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css 背景图片平铺技巧 - Python技术站