CSS background-repeat 属性-之路教程

CSS background-repeat 属性

background-repeat 属性用于定义背景图像应该如何重复。
默认情况下，背景重复在水平和垂直方向上重复。
如果设置了“repeat-x”值，图像将仅在水平方向重复。
如果设置了“repeat-y”值，图像将仅垂直重复。
还有另外两个值：“space”和“round”。
“Space”使图像重复而不剪裁，“round”使图像重复而无间隙。

我们需要将 background-repeat 属性与 background-image 和 background-position 属性一起使用。

默认情况下，图像将显示在左上角，没有 background-position 属性。

初始值	repeat
应用于	所有元素。它也适用于：::first-letter 和 ::first-line。
继承	无效
可动画的	无效
版本	CSS1
DOM 语法	object.style.backgroundRepeat=“repeat-x”；

语法

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;

background-repeat 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/.jpeg");
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <h2>标题背景图重复铺垫示例</h2>
    <p>背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--</p>
  </body>
</html>

在下面的例子中，背景图像没有重复。

具有“no-repeat”值的 background-repeat 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpeg");
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h2>标题背景图重复铺垫示例</h2>
    <p>背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--</p>
  </body>
</html>

在下一个示例中，背景图像仅在水平方向上重复。

具有 "repeat-x" 值的 background-repeat 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpeg");
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h2>标题背景图重复铺垫示例</h2>
    <p>背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--</p>
  </body>
</html>

其中“repeat-y”值使图像仅垂直重复。

具有 "repeat-y" 值的 background-repeat 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpeg");
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h2>标题背景图重复铺垫示例</h2>
    <p>背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--</p>
  </body>
</html>

让我们尝试一个示例，其中背景图像重复而不剪裁。

具有 "space" 值的 background-repeat 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpeg");
        background-repeat: space;
      }
    </style>
  </head>
  <body>
    <h2>标题背景图重复铺垫示例</h2>
    <p>背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--</p>
  </body>
</html>

在以下示例中，应用的值使背景图像无间隙地重复。

具有“round”值的 background-repeat 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/bg.jpeg");
        background-repeat: round;
      }
    </style>
  </head>
  <body>
    <h2>标题背景图重复铺垫示例</h2>
    <p>背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--背景图重复示例--</p>
  </body>
</html>

CSS background-repeat 属性值说明

值	说明
repeat	背景图像水平和垂直重复。这是默认值。
repeat-x	背景图像仅水平重复。
repeat-y	背景图像仅垂直重复。
no-repeat	背景图像不重复。
space	背景图像尽可能地重复而不剪切。
round	背景图像无间隔重复。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

日期：2020-06-02 22:14:16 来源：oir作者：oir

←CSS background-position 属性

CSS background-size 属性→

语法