HTML | DOM 样式 backgroundPosition 属性

HTML DOM 样式backgroundPosition ：它设置或返回背景图像在元素中的位置。

句法：

• 获取 backgroundPosition 属性

  object.style.backgroundPosition

• 设置 backgroundPosition 属性

  object.style.backgroundPosition = value

属性值：

• 关键字值：这用于使用关键字指定位置。如果只指定了一个值，则默认情况下另一个值将是 ‘center’。可能的关键字组合是：
  • 左上方
  • 顶部中心
  • 右上
  • 中左
  • 中心 中心
  • 中右
  • 左下方
  • 底部中心
  • 右下角
• x% y%：用于使用百分比指定位置。 x%确定水平位置， y%确定相对于初始左上角位置的垂直位置。
• xpos ypos ：这用于使用像素或任何其他 CSS 度量来指定位置。 xpos确定水平位置， ypos确定相对于初始左上角位置的垂直位置。
• initial ：这用于将此属性设置为其默认值。
• 继承：这从其父级继承属性。

使用以下示例解释这些值：

示例 1：使用关键字值。我们在本例中使用值“右下角”。

  

    
      DOM Style backgroundPosition Property
    
    
        .bg-img {
            height: 300px;
            width: 300px;
            border-style: solid;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
                        no-repeat center;
        }
    

  

    
      GeeksforGeeks
    
    
      DOM Style backgroundPosition Property
    
    
      Click on the button to change the 
      position of the background image
    
    
    
  
    
        Change position of background image
    
  
    
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting the position to bottom vertically
            // and right horizontally
            elem.style.backgroundPosition = 'bottom right';
        }
    

  

输出：

• 在按下按钮之前：
  
• 按下按钮后：
  

示例 2：使用百分比来指定位置。我们使用“25% 75%”来定位图像。

  

    
    
      DOM Style backgroundPosition Property
    
    
        .bg-img {
            height: 300px;
            width: 300px;
            border-style: solid;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png') 
                        no-repeat center;
        }
    

  

    
      GeeksforGeeks
    
    
      DOM Style backgroundPosition Property
    
    
      Click on the button to change the
      position of the background image
    
  
    
    
    
        Change position of background image
    
  
    
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting the position to 25% horizontally
            //and 75% vertically
            elem.style.backgroundPosition = '25% 75%';
        }
    

  

输出：

• 在按下按钮之前：
  
• 按下按钮后：
  

示例 3：使用固定单位指定位置。我们使用“50px 25px”来定位图像。

  

    
      DOM Style backgroundPosition Property
    
    
        .bg-img {
            height: 300px;
            width: 300px;
            border-style: solid;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
                        no-repeat center;
        }
    

  

    
      GeeksforGeeks
    
    
      DOM Style backgroundPosition Property
    
    
      Click on the button to change the 
      position of the background image
    
    
  
    
        Change position of background image
    
  
    
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting the position to 50px horizontally
           //and 25px horizontally
            elem.style.backgroundPosition = '50px 25px';
        }
    

  

输出：

• 在按下按钮之前：
  
• 按下按钮后：
  

示例 4：使用初始值。这会将位置设置为其默认值。

  

    DOM Style backgroundPosition Property
    
        .bg-img {
            height: 300px;
            width: 300px;
            border-style: solid;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png') 
                        no-repeat center;
        }
    

  

    
      GeeksforGeeks
    
    
      DOM Style backgroundPosition Property
    
    
      Click on the button to change the 
      position of the background image
    
    
    
  
    
        Change position of background image
    
  
    
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting the position to the default 
            // value with initial
            elem.style.backgroundPosition = 'initial';
        }
    

  

输出：

• 在按下按钮之前：
  
• 按下按钮后：
  

示例 5：使用继承值。这从其父元素继承位置。

  

    
      DOM Style backgroundPosition Property
    
    
        /* Parent element */
          
        #parent {
            height: 300px;
            width: 300px;
            border-style: solid;
            /* Setting the parent's background-position
          //to center left*/
            background-position: center left;
        }
          
        .bg-img {
            height: 300px;
            width: 300px;
            background: 
url('https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png')
                        no-repeat center;
        }
    

  

    
      GeeksforGeeks
    
    
      DOM Style backgroundPosition Property
    
    
      Click on the button to change the 
      position of the background image
    
    
        
    
  
    
        Change position of background image
    
  
    
        function changePos() {
            elem = document.querySelector('.bg-img');
  
            // Setting the position to inherit from its parent
            elem.style.backgroundPosition = 'inherit';
        }
    

  

输出：

• 在按下按钮之前：
  
• 按下按钮后：
  

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

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