如何使用 CSS 拉伸和缩放背景图像？

background-size 属性用于拉伸和缩放背景图像。此属性设置背景图像的大小。在这里，我们将看到所有可能的 background-size 和 background-scale 属性示例。

句法：

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

cover：该属性值用于在 x 和 y 方向拉伸背景图像并覆盖整个区域。
length：此属性值用于缩放背景图像。它改变背景图像的大小。长度值可以采用 px、em、% 等形式。

示例 1：此示例在 x 和 y 方向拉伸背景图像。

   
      
   
     
   
      
background-size: 100% auto :
      

          The background image is displayed
          in its original size.
      
      

        
      
background-size: auto (default):
      
The background image is set to auto.
      

        
      
background-size: cover:
      

          The background image is set to cover
          to specified area.
      
      

        
   
        

输出：

示例 2：此示例缩放背景图像。

   
      
   
     
   
      
background-size: initial:
      
The background image is set to initial.
      

        
      
background-size: contain:
      
The background image is set to contain.
      

        
      
background-size: 300px 100px:
      
The background image is set in pixel size.
      

   

输出：