• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • background-size

    版本:CSS3

    background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

    示例

    /* 关键字 */
    background-size: cover;
    background-size: contain;
    
    /* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
    background-size: 50%;
    background-size: 3em;
    background-size: 12px;
    background-size: auto;
    
    /* 两个值 */
    /* 第一个值指定图片的宽度,第二个值指定图片的高度 */
    background-size: 50% auto;
    background-size: 3em 25%;
    background-size: auto 6px;
    background-size: auto auto;
    
    /* 逗号分隔的多个值:设置多重背景 */
    background-size: auto, auto;    /* 不同于background-size: auto auto */
    background-size: 50%, 25%, 25%;
    background-size: 6px, auto, contain;
    
    /* 全局属性 */
    background-size: inherit;
    background-size: initial;
    background-size: unset;
    

    语法:

    background-size:[ <length>| <percentage>| auto ]| cover | contain

    取值:

    • <length>:用长度值指定背景图像大小。不允许负值。
    • <percentage>:用百分比指定背景图像大小。不允许负值。
    • auto:背景图像的真实大小。
    • cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
    • contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    位图一定有固有尺寸与固有比例,矢量图可能两者都有,也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。

    背景图片大小计算

    • 如果指定了 background-size 的两个值并且不是auto:背景图片按指定大小渲染。
    • contain 或 cover:保留固有比例,最大的包含或覆盖背景区。如果图像没有固有比例,则按背景区大小。
    • auto 或 auto auto:图像如果有两个长度,则按这个尺寸。如果没有固有尺寸与固有比例,则按背景区的大小。如果没有固有尺寸但是有固有比例,效果同 contain。如果有一个长度与比例,则由此长度与比例计算大小。如果有一个长度但是没有比例,则使用此长度与背景区相应的长度。
    • 一个为 auto 另一个不是auto:如果图像有固有比例,则指定的长度使用指定值,未指定的长度由指定值与固有比例计算。如果图像没有固有比例,则指定的长度使用指定值,未指定的长度使用图像相应的固有长度,若没有固有长度,则使用背景区相应的长度。
    • 注意,对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7-与Firefox 8+,以确定不同之处能否接受。
    默认值auto
    适用于所有元素。它也适用于::first-letter::first-line
    继承性
    动画性
    计算值按规定,但相对长度转换为绝对长度
    <div id="container">
    
      <div class="subcontainer contain">contain</div>
      <div class="subcontainer cover">cover</div>
      <div class="subcontainer width">120px</div>
      <div class="subcontainer width-height">120px 200px</div>
    
    </div>
    
    #container {
       width: 100%;
       display:flex;
       justify-content: space-around;
       height: 300px;
       overflow: scroll;
    }
    
    .subcontainer {
      width: 100%;
      max-width: 200px;
      margin: 8px;
      padding: 5px;
      background-image: url("eagle.jpg");
      background-repeat: no-repeat;
      color: white;
      font-family: monospace;
    }
    
    .contain {
      background-size: contain;
    }
    
    .cover {
      background-size: cover;
    }
    
    .width {
      background-size: 120px;
    }
    
    .width-height {
      background-size: 120px 200px;">每个值可以是<length>,是<percentage>,或者auto.
    


    示例:

    background-size: contain;
    background-size: 50%;
    background-size: 3em;
    background-size: auto 1em;
    background-size: 50% 25%;
    
    .bar {
           width: 50px; height: 100px;
           background-image: gradient(...);
    
           /* 不推荐 */
           background-size: 25px;
           background-size: 50%;
           background-size: auto 50px;
           background-size: auto 50%;
    
           /* 可行 */
           background-size: 25px 50px;
           background-size: 50% 50%;
    }
    

    特别不推荐对渐变px与auto一起用,因为Firefox 8之前不能重复渲染,并且对于没有实现Firefox 8渲染特性的浏览器,不知道指定了背景的元素的确切大小。

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div{
    	width:450px;
    	height:300px;
    	background-size:100px 100px;
    	background-image:url("bird.png");
    	background-repeat:no-repeat;
    
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

    效果图:

    上篇:background-clip