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


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。