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

HTML Style backgroundSize用法及代码示例


HTML DOM样式backgroundSize属性用于设置或返回背景图像的大小。

用法:

  • 获取backgroundSize属性
    object.style.backgroundSize
  • 设置backgroundSize属性
    object.style.backgroundSize = "auto | length | percentage | 
cover| contain |initial | inherit"

属性值：


  • auto:这用于以原始尺寸显示背景图像。这是默认值。
  • length:这用于设置图像的高度和宽度。这两个值分别设置宽度和高度。如果仅给出一个值，则另一个值设置为“自动”。
  • percentage:这将根据父元素的百分比设置宽度和高度。这两个值分别设置宽度和高度。如果仅给出一个值，则另一个值设置为“自动”。
  • cover:这用于缩放背景图像以覆盖整个容器元素。
  • contain:这用于缩放背景图像，使其尽可能大，以使高度和宽度都适合容器区域内。
  • initial：用于将此属性设置为其默认值。
  • inherit：这从其父级继承了背景尺寸属性。
  1. 汽车：用于以原始尺寸(默认值)显示背景图像。

    例：

    <!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundSize Property</title> 
    <style> 
        .bg-img { 
            height:200px; 
            width:200px; 
            border-style:solid; 
            background-image:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png'); 
            background-repeat:no-repeat; 
            /* we set the size ourselves to demonstrate auto */ 
            background-size:100px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundSize Property</b> 
    <p>Click on the button to  
      change the size of the background image</p> 
    <div class="bg-img"></div> 
    
    <button onclick="changePos()">Change size of image</button> 
  
    <script> 
        function changePos() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting size to auto 
            elem.style.backgroundSize = 'auto'; 
        } 
    </script> 
</body> 
  
</html>

    输出：

    • 按下按钮之前：

      auto-before

    • 按下按钮后：

      auto-after

  2. 长度：这用于设置图像的高度和宽度。这两个值分别设置宽度和高度。如果仅给出一个值，则另一个值设置为“自动”。

    例：

    <!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundSize Property</title> 
    <style> 
        .bg-img { 
            height:200px; 
            width:200px; 
            border-style:solid; 
            background-image:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png'); 
            background-repeat:no-repeat; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundSize Property</b> 
    <p>Click on the button to  
      change the size of the background image</p> 
    
    <div class="bg-img"></div> 
    <button onclick="changePos()">Change size of image</button> 
  
    <script> 
        function changePos() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting size to 200px in width 
            // and 50px in height 
            elem.style.backgroundSize =  
              '200px 50px'; 
        } 
    </script> 
</body> 
  
</html>

    输出：

    • 按下按钮之前：

      before-button

    • 按下按钮后：

      length-after

  3. 百分比：这将根据父元素的百分比设置宽度和高度。这两个值分别设置宽度和高度。如果仅给出一个值，则另一个值设置为“自动”。

    例：

    <!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundSize Property</title> 
    <style> 
        .bg-img { 
            height:200px; 
            width:200px; 
            border-style:solid; 
            background-image:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png'); 
            background-repeat:no-repeat; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
      GeeksforGeeks 
   </h1> 
    <b>DOM Style backgroundSize Property</b> 
    <p>Click on the button to  
      change the size of the background image</p> 
    
    <div class="bg-img"></div> 
    <button onclick="changePos()"> 
      Change size of image 
    </button> 
  
    <script> 
        function changePos() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting size to 25% in width and 50% in height 
            elem.style.backgroundSize = '25% 50%'; 
        } 
    </script> 
</body> 
  
</html>

    输出：


    • 按下按钮之前：

      before-button

    • 按下按钮后：

      percentage-after

  4. 覆盖：这用于缩放背景图像以覆盖整个容器元素。

    示例4：

    <!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundSize Property</title> 
    <style> 
        .bg-img { 
            height:200px; 
            width:200px; 
            border-style:solid; 
            background-image:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png'); 
            background-repeat:no-repeat; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundSize Property</b> 
    <p>Click on the button to  
      change the size of the background image</p> 
    
    <div class="bg-img"></div> 
    <button onclick="changePos()">Change size of image</button> 
  
    <script> 
        function changePos() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting size to cover 
            elem.style.backgroundSize = 'cover'; 
        } 
    </script> 
</body> 
  
</html>

    输出：

    • 按下按钮之前：

      before-button

    • 按下按钮后：

      cover-after

  5. 包含：这用于缩放背景图像，使其尽可能大，以使高度和宽度都适合容器区域内。

    示例5：

    <!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundSize Property</title> 
    <style> 
        .bg-img { 
            height:200px; 
            width:200px; 
            border-style:solid; 
            background-image:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png'); 
            background-repeat:no-repeat; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundSize Property</b> 
    
    <p>Click on the button to  
      change the size of the background image</p> 
    <div class="bg-img"></div> 
    
    <button onclick="changePos()"> 
      Change size of image 
  </button> 
  
    <script> 
        function changePos() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting size to contain 
            elem.style.backgroundSize = 'contain'; 
        } 
    </script> 
</body> 
  
</html>

    输出：

    • 按下按钮之前：

      before-button

    • 按下按钮后：

      contain-after


  6. 初始：用于将此属性设置为其默认值。

    示例6：

    <!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundSize Property</title> 
    <style> 
        .bg-img { 
            height:200px; 
            width:200px; 
            border-style:solid; 
            background-image:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png'); 
            background-repeat:no-repeat; 
            
            /* we set the size ourselves to demonstrate initial */ 
            background-size:100px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundSize Property</b> 
    <p>Click on the button to  
      change the size of the background image</p> 
    
    <div class="bg-img"></div> 
    <button onclick="changePos()"> 
      Change size of image 
    </button> 
  
    <script> 
        function changePos() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting size to initial 
            elem.style.backgroundSize = 'initial'; 
        } 
    </script> 
</body> 
  
</html>

    输出：

    • 按下按钮之前：

      initial-before

    • 按下按钮后：

      initial-after

  7. 继承：这从其父级继承了背景尺寸属性。

    示例7：

    <!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>DOM Style backgroundSize Property</title> 
    <style> 
        .bg-img { 
            height:200px; 
            width:200px; 
            border-style:solid; 
            background-image:url( 
'https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png'); 
            background-repeat:no-repeat; 
        } 
          
        #parent { 
            background-size:100px 200px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <b>DOM Style backgroundSize Property</b> 
    <p>Click on the button to  
      change the size of the background image</p> 
  
    <div id="parent"> 
        <div class="bg-img"></div> 
    </div> 
  
    <button onclick="changePos()"> 
      Change size of image 
   </button> 
  
    <script> 
        function changePos() { 
            elem = document.querySelector('.bg-img'); 
  
            // Setting size to inherit 
            elem.style.backgroundSize = 'inherit'; 
        } 
    </script> 
</body> 
  
</html>

    输出：

    • 按下按钮之前：

      before-button

    • 按下按钮后：

      inherit-after

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

  • Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Safari 4.1
  • Opera 10.5


相关用法


注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style backgroundSize Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。