CSS 属性

CSS 的background-repeat 属性控制背景上图像的重复。图像可以沿水平和垂直轴重复，也可以不重复。

重复的图像会根据元素的大小进行裁剪，但可以调整它们的大小以适合元素，使用background-repeat 属性的 round 和 space 值。

属性值

  • <repeat-style>:这些值可以通过一个值或二个值语法格式。

  • 单值语法是二值语法的简写。下表显示了两种格式的等效值:

    • 序号单值语法双值语法
    1repeat-xrepeat no-repeat
    2repeat-yno-repeat repeat
    3repeatrepeat repeat
    4spacespace space
    5roundround
    6no-repeatno-repeat no-repeat

在二值语法中，第一个值定义图像的水平重复和第二个值定义了垂直行为。每个关键字都有详细描述:

  • repeat:重复图像以填充整个绘画区域。可以裁剪图像以适合空间。

  • space:根据需要重复图像，而不裁剪它。空白在图像之间均匀分布，第一个和最后一个图像固定在元素的两侧。

  • round:图像被拉伸，如果空间增加并且添加另一个图像，它们会压缩以容纳它并填充空间。

  • no-repeat:图像设置为不重复。

适用范围

所有 HTML 元素。

DOM 语法

object.style.backgroundRepeat = "repeat | no-repeat | space | round";

CSS background-repeat: repeat

这里是设置背景图像重复行为的示例，如repeat:

<html>
<head>
<style>  
   .repeat {
      background-image: url('/css/images/tutimg.png');
      background-repeat: repeat;
      width: 800px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="repeat"></div>
</body>
</html>

CSS background-repeat: no-repeat 

这里是设置重复的示例背景图像的行为，如no-repeat:

<html>
<head>
<style>  
   .no-repeat {
      background-image: url('/css/images/tutimg.png');
      background-repeat: no-repeat;
      width: 500px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="no-repeat"></div>
</body>
</html>

CSS background-repeat: Repeat-x 

这里是设置背景图像的重复行为的示例，如Repeat-x:

<html>
<head>
<style>  
   .repeat-x {
      background-image: url('/css/images/tutimg.png');
      background-repeat: repeat-x;
      width: 800px;
      height: 300px;
      position: relative;
   }
</style>
</head>
<body>
   <div class="repeat-x"></div>
</body>
</html>

CSS background-repeat: Repeat-y 

下面是设置背景图片重复行为的示例，如repeat-y:

<html>
<head>
<style>  
   .repeat-y {
      background-image: url('/css/images/tutimg.png');
      background-repeat: repeat-y;
      width: 800px;
      height: 300px;
      position: relative;
}
</style>
</head>
<body>
   <div class="repeat-y"></div>
</body>
</html>

CSS background-repeat: space 

以下是设置背景图像的重复行为（空格）的示例:

<html>
<head>
<style>  
   .space {
      background-image: url('/css/images/logo.png');
      background-repeat: space;
      width: 800px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
    <div class="space"></div>
</body>
</html>

CSS background-repeat: round 

下面是设置背景图像重复行为的示例，如round:

<html>
<head>
<style>  
   .round {
      background-image: url('/css/images/tutimg.png');
      background-repeat: round;
      width: 800px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
    <div class="round"></div>
</body>
</html>

CSS background-repeat: repeat no-repeat

下面是设置背景图片重复行为的示例，为repeat no-repeat:

<html>
<head>
<style>  
   .repeat-no-repeat {
      background-image: url('/css/images/smiley.png');
      background-repeat: repeat no-repeat;
      width: 500px;
      height: 100px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
    <div class="repeat-no-repeat"></div>
</body>
</html>