📜  CSS | background-size 属性

📅  最后修改于: 2021-08-29 12:30:11             🧑  作者: Mango

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

句法:

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

属性值:

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

  • 句法:
    background-size: auto;
  • 例子:
     
     
         
            
                background-size Property
             
              
             
         
          
         
            

    background-size: auto;

                                                          
  • 输出:

length:用于设置背景图片的宽度和高度。第一个值表示宽度,第二个值表示背景图像的高度,如 px、pt、em 等。如果没有给出任何值,则将其设置为 auto。

  • 句法:
    background-size: length;
  • 例子:
     
     
         
            
                background-size Property
             
              
             
         
          
         
            

    background-size: length;

                                               
  • 输出:

百分比:用于根据与父元素相关的百分比设置宽度和高度。第一个值表示宽度,第二个值表示背景图像的高度。如果未给出任何值,则将其设置为自动。

  • 句法:
    background-size: percentage;
  • 例子:
     
     
         
            
                background-size Property
             
              
             
         
          
         
            

    background-size: percentage (%);

                                            
  • 输出:

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

  • 句法:
    background-size: cover;
  • 例子:
     
     
         
            
                background-size Property
             
              
             
         
          
         
            

    background-size: cover;

                                     
  • 输出:

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

  • 谷歌浏览器 4.0, 1.0 -webkit-
  • 浏览器 9.0
  • Firefox 4.0, 3.6-moz-
  • 歌剧 4.1, 3.0 -webkit-
  • Safari 10.5, 10-o-