HTML | DOM 样式背景属性

HTML DOM 中的Style background 属性是用于设置或返回元素背景的简写属性。它可以帮助操纵八种背景属性中的一种或多种。

句法：

• 它返回背景属性。

  object.style.background

• 它用于设置背景属性。

  object.style.background = "color image repeat attachment 
  position size origin clip|initial|inherit"

属性值：背景中有 8 个属性，描述如下：

• color：用于设置元素的背景颜色。它对应于背景颜色属性。
• image：用于设置元素的背景图片。它对应于 background-image 属性。
• 重复：用于设置背景图像应如何沿 x 轴和 y 轴重复。它对应于背景重复属性。
• 附件：用于设置图像是滚动还是保持固定。它对应于背景附件属性。
• position：用于设置背景图片的起始位置。它对应于背景位置属性。
• size：用于以固定单位或百分比设置背景图像的大小。它对应于 background-size 属性。
• origin： background-origin 属性指定背景图像的原点位置。它对应于 background-origin 属性。
• clip：用于设置背景图片的绘制区域。它对应于背景剪辑属性。
• initial：用于将属性设置为其默认值。
• 继承：用于从其父级继承属性。

示例：背景颜色属性

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set
        the background color
    
      
    
      
    
        Set background color
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "green";
        }
    

  
                    

输出：

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

示例：背景图像属性

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set
        the background image
    
      
    
      
    
        Set background color
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png')";
        }
    

  
                    

输出：

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

示例：此示例使用 repeat-x 属性沿 x 轴重复背景图像。

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set
        the background image
    
      
    
      
    
        Set background color
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') repeat-x";
        }
    

  
                    

输出：

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

示例：本示例将附件属性设置为“滚动”。

      

    
        DOM Style Background Property
    
      
     
        body { 
            background: url( 
'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png') 
            no-repeat right top / 200px; 
            background-attachment: fixed; 
        } 
        #scrolling-area { 
            height: 1000px; 
        } 
     
 
  
 
    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set 
        the background color
    
      
    
      
    
        Set background color
    
      
     
        This is a large area for scrolling. 
     
  
    
     
        function setBg() { 
            document.body.style.backgroundAttachment 
                    = 'scroll'; 
        } 
     
 
  
                     

输出：

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

示例：本示例将背景图像的位置设置为“中心”。

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set
        the background image
    
      
    
      
    
        Set background color
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center";
        }
    

  
                    

输出：

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

示例：此示例将背景图像的大小设置为宽度为“200px”和高度为“150px”。

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set
        the background image
    
      
    
      
    
        Set background color
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat center / 200px 150px ";
        }
    

  
                    

输出：

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

示例：本示例将背景原点设置为“border-box”。

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            padding: 20px;
            border: 10px dotted;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set
        the background image
    
  
    
      
    
        Set background image
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = 
"url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') no-repeat border-box";
        }
    

                    

输出：

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

示例：本示例将背景剪辑设置为“content-box”。

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            border: 10px dotted;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set 
        the background color
    
      
    
      
    
        Set background color
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "green content-box";
        }
    

                    

输出：

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

示例：它设置了它的默认属性

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            height: 250px;
            width: 250px;
            border-style: solid;
            background: green
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set the
        background to initial
    
      
    
      
    
        Set background
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "initial";
        }
    

  
                    

输出：

点击按钮前：

• 点击按钮后：
  

示例：用于从其父级继承属性

      

    
        DOM Style Background Property
    
      
    
        .GFG {
            margin: 20px;
            height: 100px;
            width: 100px;
            border: 5px solid;
        }
  
        #parent {
            height: 250px;
            width: 250px;
            border: 1px solid;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png') center / cover;
        }
    

  

    
        GeeksforGeeks
    
      
    DOM Style Background Property
      
    
        Click on the button to set
        the background to inherit
    
      
     
        
    
      
    
        Set background
    
      
    
    
        function setBg() {
            elem = document.querySelector('.GFG');
            elem.style.background = "inherit";
        }
    

  
                    

输出：

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

支持的浏览器：后台属性支持的浏览器如下：

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