CSS3 background介绍_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:17:541180浏览
background应该是CSS里使用频率颇高的属性，简单实用。但参数偏多，本篇就介绍一下background的各种特性。
CSS3之前主要有5个属性：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS3增加了3个属性：
- background-origin
- background-clip
- background-size
background-color：背景色，默认值transparent，不赘述。
background-image：背景图，默认值none。可用url指定图片地址，可以是相对地址，也可以是绝对地址，不赘述。
background-repeat：no-repeat，repeat-x，repeat-y，repeat。默认值repeat。CSS3增加了两个值space，round。前4个效果见下图。左图no-repeat就是背景图的原始尺寸，依次是水平重复，垂直重复，全方位重复。有个两个细节要注意：
- 背景图是起始于盒子模型中padding-box的左上角，而非content区域的左上角。如果你设置了padding，padding区域也会被背景图覆盖。
- 重复都是正向反向两端重复。例如repeat-x，往右重复效果很明显，但仔细看发现也会往左重复（左边框底下也有图片），不要误以为只往右重复。同理repeat-y，也会往上重复（上边框底下也有图片）。同理repeat是全方位重复，4条边框底下均有图片
CSS3中可以允许设两个值，分别代表水平和垂直的重复。例如background-repeat: repeat repeat;等价于background-repeat: repeat;。看上去好像然并卵，要水平或垂直重复已经有repeat-x或repeat-y了，允许设两个值究竟有什么用呢？作用是和下面CSS3里新增的两个值（space，round）结合起来用，如果只允许单值是实现不了水平/垂直单向space或round效果的。
space表示两端平铺，保持背景图原始尺寸。round表示两端对齐，会适当拉伸背景图。例如左图background-repeat: space no-repeat;水平两端平铺，垂直不重复。右图background-repeat: round no-repeat;水平两端对齐，垂直不重复。左图好理解，不赘述。右图round no-repeat和repeat-x看起来效果差不多，但仔细看其实是有区别的，round会拉伸图片以实现两端对齐，但repeat-x是保持背景图原始尺寸的前提下简单重复。
用单值的话，就是水平垂直两方向重复。例如左图background-repeat: space;。右图background-repeat: round;。
background-attachment：scroll（默认值），fixed。表示背景图是否随页面滚动或是固定。通常fixed用在html或body上。
background-position：背景图水平和垂直起点。默认值0% 0%，即起点是在padding-box的左上角。可设百分比也可设px值。正值会往正向偏移（以左上角为起点，往右和往下是正反向，往左和往上是反方向）。例如左图background-position: -10px 10px;右图background-position: 10px -10px;（为演示效果均设成no-repeat）。50%可以用关键字center代替。
CSS3中增强了该属性，将两值扩展为四值，如background-position: left 10px top 10px;，前2个代表水平方向，后两个代表垂直方向。这样背景图的起点将不再局限于左上角，你可以更加灵活地掌控背景图的位置。
background-position: left 10px top 10px;background-position: left 10px bottom 10px;background-position: right 10px top 10px;background-position: right 10px bottom 10px;
上面这5个属性是CSS1里就定义了，CSS3只不过做了适当的扩展。下面是介绍的是CSS3里新增的属性。
background-origin：content-box，padding-box（默认值），border-box。该属性决定了背景图片原点在盒子模型哪里。默认值padding-box表示背景图原点在content+padding区域。同理content-box表示背景图原点在content区域。border-box表示背景图原点在content+padding+border区域。左图content-box（div有5px的padding），中图padding-box，下图border-box（可以看出背景图原点是在边框外经处，背景图部分跑到了边框底部）
background-clip：content-box，padding-box，border-box（默认值）。背景剪裁区域。我看完W3C简单的说明和例子后，发现该属性和上面background-origin非常像，实在难以理解区别在哪里。实际上是有区别的。background-origin是确定背景图片的原点起点位置，而background-clip是指背景剪裁区域。前者的对象是背景图片，后者的对象是整个背景。两者的区别如下图：
/* 左图 */background: red url(bg50.png) no-repeat;background-origin: content-box;/* 右图 */background: red url(bg50.png) no-repeat;background-clip: content-box;
同样设成了content-box。左图background-origin将背景图片的原点设为content区域左上角。右图background-clip设为content-box的意思是：将content区域外的所有背景相关内容（包括背景色和超出部分的背景图片）剪裁掉。
在上面代码的基础上，将左图background-origin和右图background-clip都改成content-box
左图background-origin将背景图片的原点设为padding-box区域左上角。右图background-clip设为padding-box的意思是：将padding-box区域外的所有背景相关内容剪裁掉，看效果只剪裁掉了border下面的背景色，而背景图片没有被剪裁。道理很简单，因为背景图片默认的background-origin就是padding-box，因此没有超出padding-box区域的部分。
在上面代码的基础上，将左图background-origin和右图background-clip都改成border-box
原理和上面都一样，不再赘述。
background-size：px值，%百分比，cover，contain，auto（默认值）。在CSS2.1之前，我们是没有办法控制背景图片的大小的。CSS3可以用该属性来控制背景图片的大小。例如background-size: 10px 20px;第一个是width，第二个是height，如果只设一个值，第二个值将成为auto（意思是保持原始宽高比例）。
关键字cover将按比例缩放图片来填充满整个背景区域。contain将保持原图比例的前提下，缩放图片来填充背景区域。左图background-size: cover;，右图background-size: contain;
原图是150*200px，cover通过缩放会完全充满背景区域，但可能会出现图片扭曲或截断，因此多用在背景图片比容器小的情况下。contain会保证原图比例的前提下尽量填满背景区域，但可能出现没完全填满的情况，因此多用在背景图片比容器大的情况下。
小Tips：嫌cover，contain自适应缩放不居中的话，可以加上background-position: center;
至此background的各属性介绍完毕。我们可以单独指定background各属性，也可以将原始的5个属性合并到一起指定，CSS3新增的3个属性请单独指定。
未指定的属性将被浏览器自动设为默认值。如background: red;等价于background: red none repeat repeat scroll 0% 0%;。CSS3新增的3个属性也会被设为默认值：padding-box border-box auto
下面介绍下CSS3多背景属性
CSS3之前每个容器只能指定一张背景图片，要实现多个背景图片的效果，需要HTML端多个容器叠加，比较麻烦。CSS3开始可以直接在一个容器上指定多张图片。
指定多张图片时，只有background-color属性是无法指定多个的，因为该属性是隶属于容器而非背景图片的。你可以单独为多张图片指定background属性，也可以合并在一起指定。
单独为多张图片指定background属性格式：
background-image: url(bg.png), url(bg50.png), url(bgheader.jpg);background-repeat: repeat-x, repeat-y, no-repeat;background-attachment: scroll, scroll, scroll;background-position: center, right 10px bottom 10px, left top; background-origin: content-box, padding-box, border-box;background-clip: border-box, padding-box, content-box;background-size: auto, 50% auto, 50% 50%;
各属性第一个逗号是图1，各属性第二个逗号是图2，各属性最后一个值是图3。上面代码最终效果是图4。从图中也可以看出层叠关系，第一个逗号的图1在最上层，依次往下是第二个逗号的图2和最后一个值的图3。当然最底层肯定是容器的background-color。
你也可以将各属性合并在一起写，中间仍旧用逗号隔开，效果和上图4是一样的：
background: url(bg.png) repeat-x scroll center, url(bg50.png) repeat-y scroll right 10px bottom 10px, url(bgheader.jpg) no-repeat scroll left top;background-origin: content-box, padding-box, border-box;background-clip: border-box, padding-box, content-box;background-size: auto, 50% auto, 50% 50%;
不论你单独写还是合并写，最后加一个background-color属性（如果容器需要背景色）。
总结
background应该算CSS里一个比较基础的属性，本篇更多的是给自己零散的知识点做一个总结。以后对background有什么新的发现都可以往这篇里增加，这就像一颗种子，假以时日终会长成一颗小树苗。