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


CSS background-size用法及代码示例

CSS中的background-size属性用于设置背景图像的大小。

用法:

background-size:auto|length|cover|contain|initial|inherit; 

属性值:


auto:用于将background-size属性设置为其默认值。用于将background-image显示为原始大小。

  • 用法:
    background-size:auto;
  • 例:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                background-size Property 
            </title>  
              
            <style>  
                body {  
                    background-image:url(  
    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');  
                    background-size:auto; 
                    background-repeat:no-repeat; 
                }  
            </style>  
        </head>  
          
        <body>  
            <h2>background-size:auto;</h2> 
        </body>  
    </html>                                                
  • 输出:

length:用于设置background-image的宽度和高度。第一个值表示宽度,第二个值表示背景图像的高度,以px,pt,em等表示。如果未指定任何值,则将其设置为auto。

  • 用法:
    background-size:length;
  • 例:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                background-size Property 
            </title>  
              
            <style>  
                body {  
                    background-image:url(  
    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');  
                    background-size:400px 450px; 
                    background-repeat:no-repeat; 
                }  
            </style>  
        </head>  
          
        <body>  
            <h2>background-size:length;</h2> 
        </body>  
    </html>                                     
  • 输出:

percent:用于设置与父元素相关的宽度和高度(以百分比表示)。第一个值表示宽度,第二个值表示背景图像的高度。如果未提供任何值,则将其设置为auto。

  • 用法:
    background-size:percentage;
  • 例:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                background-size Property 
            </title>  
              
            <style>  
                body {  
                    background-image:url(  
    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');  
                    background-size:50%; 
                    background-repeat:no-repeat; 
                }  
            </style>  
        </head>  
          
        <body>  
            <h2>background-size:percentage (%);</h2> 
        </body>  
    </html>                                  
  • 输出:

cover:用于调整背景图像的大小以覆盖整个容器元素。

  • 用法:
    background-size:cover;
  • 例:
    <!DOCTYPE html>  
    <html>  
        <head>  
            <title> 
                background-size Property 
            </title>  
              
            <style>  
                body {  
                    background-image:url(  
    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');  
                    background-size:cover; 
                    background-repeat:no-repeat; 
                }  
            </style>  
        </head>  
          
        <body>  
            <h2>background-size:cover;</h2> 
        </body>  
    </html>                           
  • 输出:

支持的浏览器:background-size属性支持的浏览器如下所示:

  • Google Chrome 4.0、1.0 -webkit-
  • Internet Explorer 9.0
  • Firefox 4.0、3.6-moz-
  • Opera 4.1、3.0 -webkit-
  • Safari 10.5、10-o-


相关用法

注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 CSS | background-size Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。