HTML | DOM 样式 backgroundAttachment 属性

HTML DOM 中的Style backgroundAttachment 属性用于设置或返回背景图像是固定还是随内容滚动。

句法：

• 它返回 backgroundAttachment 属性。

  object.style.backgroundAttachment

• 它用于设置 backgroundAttachment 属性。

  object.style.backgroundAttachment = "scroll|fixed|local|initial|
  inherit"

属性值：示例中每个属性值的说明。

scroll：此值使背景图像与元素一起滚动。它是默认值。
• 例子：

        
  
      
          DOM Style backgroundAttachment 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 backgroundAttachment Property
        
      
          Click on the button to change the attachment
          of the background image to 'scroll'.
      
        
      
          Change attachment
      
        
      
          This is a large area for scrolling.
      
    
      
      
          function changeAttachment() {
              document.body.style.backgroundAttachment
                      = 'scroll';
          }
      
  
    
                      

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

  固定：此值使背景图像相对于视口固定。

• 例子：

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

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

  local：此值使背景图像与元素的内容一起滚动。

• 例子：

        
  
      
          DOM Style backgroundAttachment 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 backgroundAttachment Property
        
      
          Click on the button to change the attachment
          of the background image to 'scroll'.
      
        
      
          Change attachment
      
        
      
          This is a large area for scrolling.
      
    
      
      
          function changeAttachment() {
              document.body.style.backgroundAttachment
                      = 'local';
          }
      
  
    
                      

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

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

• 例子：

        
  
      
          DOM Style backgroundAttachment 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 backgroundAttachment Property
        
      
          Click on the button to change the attachment
          of the background image to 'scroll'.
      
        
      
          Change attachment
      
        
      
          This is a large area for scrolling.
      
    
      
      
          function changeAttachment() {
              document.body.style.backgroundAttachment
                      = 'initial';
          }
      
  
    
                      

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

  继承：它从其父元素继承属性。

• 例子：

        
  
      
          DOM Style backgroundAttachment Property
      
        
      
          .bg-img {
              height: 150px;
              background: url(
  'https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png') 
              no-repeat right top / 200px;
          }
    
          #parent {
              background-attachment: fixed;
              height: 1000px;
          }
      
  
    
  
      
          
            
          
              GeeksforGeeks
          
            
          
              DOM Style backgroundAttachment Property
          
            
          
              Click on the button to change the attachment
              of the background image to 'inherit'.
          
            
          
              Change attachment
          
      
    
      
      
          function changeAttachment() {
              elem = document.querySelector('.bg-img');
              elem.style.backgroundAttachment = 'inherit';
          }
      
  
    
                      

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

支持的浏览器： DOM Style backgroundAttachment属性支持的浏览器如下：

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