<!DOCTYPE html>
<html>
<head>
<style>
#example1 { border: 2px solid black;
padding: 25px;
background: url("w3css.gif"); background-repeat: repeat;
}
#example2 { border: 2px solid black;
padding: 25px;
background: url("w3css.gif"); background-repeat: space;
}
#example3 { border: 1px solid black;
padding: 25px;
background: url("w3css.gif"); background-repeat: round;
}
</style>
</head>
<body>
<h2>background-repeat: repeat (default)</h2>
<p>在这里，背景图像在垂直和水平方向上重复出现。 如果不适合，将裁剪最后一张图像。 这是默认值：</p>
<div id="example1">
<h3>Hello World!</h3>
</div>
<h2>background-repeat: space</h2>
<p>在这里，背景图像尽可能多地重复而不剪裁。 第一个和最后一个图像固定在元素的任一侧，空白在图像之间均匀分布。</p>
<div id="example2">
<h3>Hello World!</h3>
</div>
<h2>background-repeat: round</h2>
<p>在这里，背景图像被重复并挤压或拉伸，以填充空间（无间隙）：</p>
<div id="example3">
<h3>Hello World!</h3>
</div>