HTML - DOM Style 物件 backgroundRepeat 屬性

HTML DOM Style 物件 backgroundRepeat 屬性設定或返回背景影像的重複方式。

語法

以下是獲取或設定 backgroundRepeat 屬性的語法。

設定 backgroundRepeat 屬性

object.style.backgroundRepeat= "repeat | repeat-x | repeat-y | no-repeat | initial | inherit";

獲取 backgroundRepeat 屬性

object.style.backgroundRepeat;

屬性值

值	描述
repeat	這是預設值，在水平和垂直兩個軸上重複背景影像。
repeat-x	在 x 軸（水平方向）上重複背景影像。
repeat-y	在 y 軸（垂直方向）上重複背景影像。
no-repeat	不允許影像重複。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

返回一個字串值，表示背景影像的重複方式。

HTML DOM Style 物件“backgroundRepeat”屬性的示例

以下示例說明了backgroundRepeat屬性的不同屬性值。

將背景影像設定為不重複

以下示例將背景影像設定為重複和不重複。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundPosition Property
    </title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png');
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to repeat or stop repeating.</p>
    <button onclick="norepeat()">No Repeat</button>
    <button onclick="repeat()">Repeat</button>
    <script>
        function norepeat(){
            document.body.style.backgroundRepeat="no-repeat";
        }
        function repeat(){
            document.body.style.backgroundRepeat="repeat";
        }
    </script>
</body>
</html>

在兩個軸上都重複

以下示例將背景影像設定為水平和垂直重複。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object backgroundRepeat Property</title>
    <style>
        body {
            background: #f3f3f3 url('/html/images/logo.png') no-repeat;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>Click to repeat on x-axis.</p>
    <button onclick="repx()">Repeat</button>
    <p>Click to repeat on y-axis.</p>
    <button onclick="repy()">Repeat</button>
    <script>
        function repx(){
            document.body.style.backgroundRepeat="repeat-x";
        }
        function repy(){
            document.body.style.backgroundRepeat="repeat-y";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
backgroundRepeat	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

列印頁面