CSS - background-repeat 属性_CSS 菜鸟教程

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

语法


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

属性值

值	描述
repeat	背景图像在水平和垂直方向上重复。默认值。
repeat-x	背景图像水平重复。
repeat-y	背景图像垂直重复。
no repeat	背景图像不会重复。
space	在不剪裁的情况下，尽可能多地重复图像。第一个和最后一个图像固定在元素的任一侧，空白区域在图像之间均匀分布。
round	背景图像重复并按压或固定以填充空格。
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

CSS 背景重复属性的示例

下面描述了具有不同值的背景重复属性的示例。

图像的重复

为了让背景图像在垂直和水平方向上重复，我们使用重复值。这在下面的示例中显示。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .repeat {
	 	 	 	 	 	 background-image: url('/css/images/tutimg.png');
	 	 	 	 	 	 background-repeat: repeat;
	 	 	 	 	 	 width: 800px;
	 	 	 	 	 	 height: 400px;
	 	 	 	 	 	 position: relative;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-repeat property</h2>
	 	 <div class="repeat"></div>
</body>

</html>

图像的水平重复

为了让背景图像水平重复两个，我们使用 repeat-x 值。这在下面的示例中显示。


<!DOCTYPE html>
<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>
	 	 <h2>CSS background-repeat property</h2>
	 	 <div class="repeat-x"></div>
</body>

</html>

图像的垂直重复

为了让背景图像垂直重复，我们使用 repeat-y 值。这在下面的示例中显示。


<!DOCTYPE html>
<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>
	 	 <h2>CSS background-repeat property</h2>
	 	 <div class="repeat-y"></div>
</body>

</html>

防止图像重复

为了防止背景图像重复，我们使用不重复值。这在下面的示例中显示。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .no-repeat {
	 	 	 	 	 	 background-image: url('/css/images/tutimg.png');
	 	 	 	 	 	 background-repeat: no-repeat;
	 	 	 	 	 	 width: 800px;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 position: relative;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-repeat property</h2>
	 	 <div class="no-repeat"></div>
</body>

</html>

空间图像重复

为了使图像在空间之间均匀分布的情况下多次重复，我们使用空间值。这在下面的示例中显示。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .space {
	 	 	 	 	 	 background-image: url('/css/images/tutimg.png');
	 	 	 	 	 	 background-repeat: space;
	 	 	 	 	 	 width: 800px;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 position: relative;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-repeat property</h2>
	 	 <div class="space"></div>
</body>

</html>

拉伸以填充空间

为了使图像重复多次并在它们之间留出很小的空间，我们使用四舍五入值。这在下面的示例中显示。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .round {
	 	 	 	 	 	 background-image: url('/css/images/tutimg.png');
	 	 	 	 	 	 background-repeat: round;
	 	 	 	 	 	 width: 800px;
	 	 	 	 	 	 height: 300px;
	 	 	 	 	 	 position: relative;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-repeat property</h2>
	 	 <div class="round"></div>
</body>

</html>

支持的浏览器

属性
background-repeat	1.0	4.0	1.0	1.0	3.5

<< CSS - background-position-y 属性 CSS - background-size 属性 >>