background-repeat

优质

小牛编辑

125浏览

2023-12-01

描述 (Description)

background-repeat定义背景图像重复的方向（如果有的话）。

可能的值 (Possible Values)

repeat - 使背景图像沿水平轴和垂直轴重复。
repeat-x - 使背景图像沿x轴重复。
repeat-y - 使背景图像沿y轴重复。
no-repeat - 防止背景图像重复出现。

适用于 (Applies to)

所有HTML元素。

DOM语法 (DOM Syntax)

object.style.backgroundRepeat = "Any of the above values";

例子 (Example)

以下是演示如果图像较小时如何重复背景图像的示例。如果您不想重复图像，则可以对background-repeat属性使用no-repeat值，在这种情况下，图像只显示一次。

默认情况下， background-repeat属性将具有repeat值。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>
   <body>
      <p>xnip</p>
   </body>
</html>

以下是演示如何垂直重复背景图像的示例。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   <body>
      <p>xnip</p>
   </body>
</html>

以下是演示如何水平重复背景图像的示例。

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   <body>
      <p>xnip</p>
   </body>
</html>