欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

CSS3：background-size背景图片尺寸属性_html/css_WEB-ITnose

程序员文章站 2022-05-03 12:25:25
...
background-size可以设置背景图片的大小，数值包括 长度length和百分比percentage。 并且会根据背景原点位置background-origin设置其图片覆盖的范围。那么下面我们一起来了解这个background-size属性吧。

background-size语法

w3c对background-size的语法规定如下：

属性名: background-size
属性值: * 其中 bg-size = [ | | auto ]{1,2} | cover | contain
初始值: auto auto
应用于: 所有元素
继承性: 无
百分比: 见下文注解
计算值: 根据指定

语法解释

1、length，percentage，根据给定长度值或者百分比来调整背景图片大小。auto为默认值，这三个值最小可重复一次，最大重复两次。对于这些值有以下解释：
第一个值为设置图片宽度，第二个值为图片的高度；但是不管是用什么值，都不能为负值
假如只给定一个值，那么第二个自动的为 'auto'；
假如指定为percentage百分比值，那么背景图大小是根据相对的背景区域来做调整，这个背景区域是由background-origin来来决定的。这在上面已经有提到过了关于图片原点的讨论。这里有必要提到 假如background-attachment:fixed，那么其背景相对区域就是初始包含块也就是视窗。 

/* 一个值: 这个值指定图片的宽度，那么第二个值为auto */background-size: autobackground-size: 50%background-size: 3embackground-size: 12px/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */background-size: 50% autobackground-size: 3em 25%background-size: auto 6pxbackground-size: auto auto/*多重背景，请用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但是必须用逗号隔开。 */background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */background-size: 50%, 25%, 25%background-size: 6px, auto, containbackground-size: inherit                       
    

  1.  1 
    2.                                 
  2.  2 
    3.                                 
  3.  3 
    4.                                 
  4.  4 
    5.                                 
  5.  5 
    6.                                 
  6.  6 
    7.                                 
  7.  7 
    8.                                 
  8.  8 
    9.                                 
  9.  9 
    10.                                 
  10.  10 
    11.                                 
  11.  11 
    12.                                 
  12.  12 
    13.                                 
  13.  13 
    14.                                 
  14.  14 
    15.                                 
  15.  15 
    16.                                 
  16.  16 
    17.                                 
  17.  17 
    18.                                 
  18.  18 
    19.                                 
  19.  19 
    20.                                 
  20.  20 
    21.
代码laycode - v1.1

2、contain，按比例调整背景图片，使得其图片宽高比自适应整个元素的背景区域的宽高比，因此假如指定的图片尺寸过大，而背景区域的整体宽高不能恰好包含背景图片的话，那么其背景某些区域可能会有空白。看以下代码 

.im-com{    width:200px;    height:50px;        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440，而元素相对区域高度为50*/     background-size:contain;}.im-com-1{    width:50px;    height:100px;       background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/     background-size:contain;}                       
    

  1.  1 
    2.                                 
  2.  2 
    3.                                 
  3.  3 
    4.                                 
  4.  4 
    5.                                 
  5.  5 
    6.                                 
  6.  6 
    7.                                 
  7.  7 
    8.                                 
  8.  8 
    9.                                 
  9.  9 
    10.                                 
  10.  10 
    11.                                 
  11.  11 
    12.                                 
  12.  12 
    13.                                 
  13.  13 
    14.                                 
  14.  14 
    15.                                 
  15.  15 
    16.                                 
  16.  16 
    17.
代码laycode - v1.1 当图片恰好自适应铺满元素的宽度或者高度，那么元素的会有空白处存在，也就是图中红色框框都显示了空白。

2、cover，按比例调整背景图片，这个属性值跟contain正好相反，背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话，那么背景图片就会被咔嚓。 

.im-com{    width:200px;    height:50px;        background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440，而元素相对区域高度为50*/     background-size:cover;}.im-com-1{    width:50px;    height:100px;       background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/     background-size:cover;}                       
    

  1.  1 
    2.                                 
  2.  2 
    3.                                 
  3.  3 
    4.                                 
  4.  4 
    5.                                 
  5.  5 
    6.                                 
  6.  6 
    7.                                 
  7.  7 
    8.                                 
  8.  8 
    9.                                 
  9.  9 
    10.                                 
  10.  10 
    11.                                 
  11.  11 
    12.                                 
  12.  12 
    13.                                 
  13.  13 
    14.                                 
  14.  14 
    15.                                 
  15.  15 
    16.                                 
  16.  16 
    17.
代码laycode - v1.1 当使用了cover这个值的时候，那么正好就跟contain相反，其会正好覆盖整个背景相对区域，但是背景图片的某些部分就看不见，如下图的狗的下半身和右侧身体显示不全。

说说背景图片计算值

假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难，但假如用混合长度来说，可能会有点一下子明白不上来。

规范给了几个例子，不妨拿出来一下：先声明，所以的元素尺寸为 100*100 

100% 100%背景图片将铺满整个内容区，假如说元素有固有宽高，那么背景图片铺满整个100*100背景区域div {    background-image: url(plasma.png);    background-repeat: no-repeat;    background-size: 100% 100%;    background-origin: content-box }背景图片调整为宽度为50*50，但是背景图片的原点位置为边框box而不是padding-boxp {    background-image: url(tubes.png);    background-size: 50% auto;    background-origin: border-box }背景图片尺寸调整为15*15para {    background-size: 15px 15px;    background-image: url(tile.png)}这是默认值，也就是auto auto，此时背景图片的尺寸将会是跟图片的固有尺寸一样.body {    background-size: auto;            /* 默认值 */    background-image: url(flower.png) }假如两个都是百分比，此时图片就会根据背景区域来按照宽高比自适应，此处背景图片为20*30，但是因为背景重复用了 'round'循环，因此背景区域高度划分了3个33.3等高区域，所以背景图片会自适应调整为20*33.3p {    background-image: url(chain.png);    background-repeat: no-repeat round;    background-size: 20% 30% }                       
    

  1.  1 
    2.                                 
  2.  2 
    3.                                 
  3.  3 
    4.                                 
  4.  4 
    5.                                 
  5.  5 
    6.                                 
  6.  6 
    7.                                 
  7.  7 
    8.                                 
  8.  8 
    9.                                 
  9.  9 
    10.                                 
  10.  10 
    11.                                 
  11.  11 
    12.                                 
  12.  12 
    13.                                 
  13.  13 
    14.                                 
  14.  14 
    15.                                 
  15.  15 
    16.                                 
  16.  16 
    17.                                 
  17.  17 
    18.                                 
  18.  18 
    19.                                 
  19.  19 
    20.                                 
  20.  20 
    21.                                 
  21.  21 
    22.                                 
  22.  22 
    23.                                 
  23.  23 
    24.                                 
  24.  24 
    25.                                 
  25.  25 
    26.                                 
  26.  26 
    27.                                 
  27.  27 
    28.                                 
  28.  28 
    29.                                 
  29.  29 
    30.                                 
  30.  30 
    31.                                 
  31.  31 
    32.
代码laycode - v1.1

在MND帮助文档中还提到了关于火狐的渐变图片背景问题，不过那是涉及到Firefox8，规范中不推荐同时使用px和auto，因为在8以前的火 狐浏览器不支持重复渲染，但是我在caniuse上看见的版本是31+，so，你就尽情的用吧。并且对于移动浏览器的支持还是非常的好的，请看下图可知， 除了opera8部分不支持以外：

应用场景

目前用到background-size的场景都是基于webapp的背景图上，大致的情况是，比如说最常见的logo作为某个元素的背景，但logo很复杂，假如说我们按照设计图上的去切片的话，那会有两种可能：
1、按照csser的分辨率去切片，比如高度为50px，logo被直接缩放到50px那就会很别扭，而且估计那那画面太美，你都不敢看；
2、按照射击湿设计的分辨率去切的话，有可能设计图的logo尺寸会很大，但是我们csser写的时候高度只有50px，那logo就会显示不全；

这时候background-size就发挥其重要的作用了，我们可以通过对背景图片大小的自适应缩放，而不会影响到起美观性又能全部显示我们所需要的效果。

直接甩出你的手机出来吧。。。↓

?

参考资料：
http://dev.w3.org/csswg/css-backgrounds/#background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Notes

相关标签： CSS3：background-size背景图片尺寸属性

上一篇： xdebug只能是在出错的时候跟踪函数调用情况吗

下一篇： ps怎么处理头发边缘

推荐阅读