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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。