CSS - background-repeat 屬性

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 背景重複屬性示例

下面介紹了使用不同值的 background-repeat 屬性的示例。

圖片重複

要使背景圖片在垂直和水平方向上都重複，我們使用 repeat 值。如下例所示。

示例

<!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>

阻止圖片重複

要阻止背景圖片重複，我們使用 no-repeat 值。如下例所示。

示例

<!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>

帶間距的圖片重複

要使圖片重複多次並在它們之間均勻分佈空白區域，我們使用 space 值。如下例所示。

示例

<!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>

拉伸以填充空白區域

要使圖片重複多次並在它們之間留下少量空白區域，我們使用 round 值。如下例所示。

示例

<!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_properties_reference.htm

列印頁面