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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。