HTML - DOM样式对象 backgroundImage 属性

HTML DOM 样式对象 **backgroundImage** 属性设置或返回元素的背景图片。

语法

以下是获取或设置 backgroundImage 属性的语法。

设置 backgroundImage 属性

object.style.backgroundImage= "url('URL') | none | initial | inherit";

获取 backgroundImage 属性

object.style.backgroundImage;

属性值

值	描述
url('URL')	指定图片位置。
none	默认值，指定不应用背景图片。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示背景图片。

HTML DOM 样式对象“backgroundImage”属性示例

以下示例说明如何设置和删除文档中的背景图片。

设置背景图片

以下示例在文档中设置背景图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundImage Property
    </title>
    <style>
        body {
            background-repeat: no-repeat;
            background-position: right;
        }
    </style>
</head>
<body>
    <p>Click to add background image.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundImage=
            "url('html/images/logo.png')";
        }
    </script>
</body>
</html>

删除背景图片

以下示例从文档中删除已存在的背景图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundImage Property
    </title>
    <style>
        body {
            background-image: url('/html/images/logo.png');
            background-repeat: no-repeat;
            background-position: right;
        }
    </style>
</head>
<body>
    <p>Click to remove background image.</p>
    <button onclick="fun()">Change</button>
    <script>
        function fun(){
            document.body.style.backgroundImage="none";
        }
    </script>
</body>
</html>

支持的浏览器

属性
backgroundImage	是 1	是 12	是 1	是 1	是 3.5

html_dom_style_object_reference.htm

打印页面