当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


HTML Style backgroundImage用法及代码示例

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

用法:

  • 获取backgroundImage属性
    object.style.backgroundImage
  • 设置backgroundImage属性
    object.style.backgroundImage = "image | none | initial |
    inherit"

属性值:


  • image:这会将属性设置为使用指定的图像。图像路径可以在url()函数中指定。
  • none:这会将属性设置为不使用背景图像。
  • initial:这用于将此属性设置为其默认值。
  • inherit:这用于从其父项继承属性。
  1. 图片:这会将属性设置为使用指定的图像。图像路径可以在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>

    输出:

    • 在单击按钮之前:
      image-before
    • 单击按钮后:
      image-after
  2. 没有:这会将属性设置为不使用背景图像。

    示例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>

    输出:

    • 在单击按钮之前:
      none-before
    • 单击按钮后:
      none-after
  3. 初始:用于将此属性设置为其默认值。

    示例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>

    输出:

    • 在单击按钮之前:
      initial-before
    • 单击按钮后:
      initial-after
  4. 继承:用于继承其父项的属性。

    示例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>

    输出:

    • 在单击按钮之前:
      inherit-before
    • 单击按钮后:
      inherit-after

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

  • Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0


相关用法

注:本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style backgroundImage Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。