HTML Style backgroundImage用法及代码示例

DOM样式backgroundImage属性用于设置或返回元素的背景图像。

用法:

获取backgroundImage属性
```
object.style.backgroundImage
```

设置backgroundImage属性

object.style.backgroundImage = "image | none | initial |
inherit"

属性值：

image:这会将属性设置为使用指定的图像。图像路径可以在url()函数中指定。
none:这会将属性设置为不使用背景图像。
initial:这用于将此属性设置为其默认值。
inherit:这用于从其父项继承属性。

图片：这会将属性设置为使用指定的图像。图像路径可以在url()函数中指定。

示例1：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundImage Property</title> 
    <style> 
        .bg-img { 
            border:solid; 
            height:180px; 
            width:200px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundImage Property</b> 
    <p class="bg-img"></p> 
    
    <button onclick="changeImage()"> 
      Change source of background image</button> 
  
    <script> 
        function changeImage() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting the backgroundImage to an url 
            elem.style.backgroundImage = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png')"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

没有：这会将属性设置为不使用背景图像。

示例2：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundImage Property</title> 
    <style> 
        .bg-img { 
            border:solid; 
            height:180px; 
            width:200px; 
            background-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundImage Property</b> 
    <p class="bg-img"></p> 
    <button onclick="changeImage()"> 
      Change source of background image 
    </button> 
  
    <script> 
        function changeImage() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting the backgroundImage to none 
            elem.style.backgroundImage = "none"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

初始：用于将此属性设置为其默认值。

示例3：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundImage Property</title> 
    <style> 
        .bg-img { 
            border:solid; 
            height:180px; 
            width:200px; 
            background-image:  
url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png'); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundImage Property</b> 
    <p class="bg-img"></p> 
    <button onclick="changeImage()"> 
      Change source of background image 
     </button> 
  
    <script> 
        function changeImage() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting the backgroundImage to initial 
            elem.style.backgroundImage = "initial"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

继承：用于继承其父项的属性。

示例4：

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundImage Property</title> 
    <style> 
        #parent { 
            border:solid; 
            height:200px; 
            width:300px; 
            background:  
url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png') 
              no-repeat; 
            background-size:cover; 
        } 
          
        .bg-img { 
            border:dashed; 
            height:100px; 
            width:100px; 
            background-size:cover; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundImage Property</b> 
    
    <div id="parent"> 
        <p class="bg-img"></p> 
    </div> 
    <button onclick="changeImage()"> 
      Change source of background image 
    </button> 
  
    <script> 
        function changeImage() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting the backgroundImage to inherit 
            elem.style.backgroundImage = "inherit"; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

支持的浏览器：下面列出了backgroundImage属性支持的浏览器：

Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Safari 1.0

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style backgroundImage Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。