HTML | DOM 样式 backgroundImage 属性

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

句法：

• 获取 backgroundImage 属性

  object.style.backgroundImage

• 设置 backgroundImage 属性

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

属性值：

• 图像：这将设置属性以使用指定的图像。图像路径可以在 url()函数指定。
• none：这将属性设置为不使用背景图像。
• 初始值：用于将此属性设置为其默认值。
• 继承：这用于从其父级继承属性。

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

   示例 1：

     
   
       DOM Style backgroundImage Property
       
           .bg-img {
               border: solid;
               height: 180px;
               width: 200px;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundImage Property
       
       
       
         Change source of background image
     
       
           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')";
           }
       
   
     

   输出：

   • 点击按钮前：
     
   • 点击按钮后：
     
2. none：这将属性设置为不使用背景图像。

   示例 2：

     
   
       DOM Style backgroundImage Property
       
           .bg-img {
               border: solid;
               height: 180px;
               width: 200px;
               background-image: 
   url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png');
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundImage Property
       
       
         Change source of background image
       
     
       
           function changeImage() {
               elem = document.querySelector('.bg-img');
     
               // Setting the backgroundImage to none
               elem.style.backgroundImage = "none";
           }
       
   
     

   输出：

   • 点击按钮前：
     
   • 点击按钮后：
     
3. initial ：这用于将此属性设置为其默认值。

   示例 3：

     
   
       DOM Style backgroundImage Property
       
           .bg-img {
               border: solid;
               height: 180px;
               width: 200px;
               background-image: 
   url('https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png');
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundImage Property
       
       
         Change source of background image
        
     
       
           function changeImage() {
               elem = document.querySelector('.bg-img');
     
               // Setting the backgroundImage to initial
               elem.style.backgroundImage = "initial";
           }
       
   
     

   输出：

   • 点击按钮前：
     
   • 点击按钮后：
     
4. inherit ：这用于从其父级继承属性。

   示例 4：

     
   
       DOM Style backgroundImage Property
       
           #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;
           }
       
   
     
   
       GeeksforGeeks
       DOM Style backgroundImage Property
       
       
           
       
       
         Change source of background image
       
     
       
           function changeImage() {
               elem = document.querySelector('.bg-img');
     
               // Setting the backgroundImage to inherit
               elem.style.backgroundImage = "inherit";
           }
       
   
     

   输出：

   • 点击按钮前：
     
   • 点击按钮后：
     

支持的浏览器： backgroundImage属性支持的浏览器如下：

• 铬 1.0
• 浏览器 4.0
• 火狐 1.0
• 歌剧 3.5
• Safari 1.0