灵活的背景定位

background-position的扩展语法方案

在css3中，background-position属性已经得到了扩展，它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背景图片跟右边保持20px的偏移量，同时跟底边保持10px的偏移量，可以这样做：

.test {
    width: 400px;
    height: 300px;
    background: url(111.png) no-repeat #58a;
    background-position: right 20px bottom 10px;

}

效果图：

background-origin方案

在网页开发生涯中，你可能多次写过类似background-position：top left；这样的代码。但是否疑惑过：这个top left 到底是哪个左上角？

每个元素身上都存在三个矩形框，如图1所示，border-box（边框的外延框），padding-box（内边距的外延框）和content-box（内容区的外延框）。那background-position这个属性指定的到底是哪个矩形框的左上角？

图1

　　默认情况下，background-position是以padding-box为准的，这样边框才不会遮住背景图片。因此，top left默认指的是padding-box的左上角。不过，在CCS3中，我们得到了一个新属性background-origin，可以用它来改变这种行为。在默认情况下，它的值是padding-box。如果把它改成content-box，我们在background-position属性中使用的边角关键字将会以内容区的边缘作为基准，如图2所示：

图2

.test {
    padding: 10px;
    width: 400px;
    height: 300px;
    background: url(111.png) no-repeat #58a;
    background-position: right 20px bottom 10px;
    background-origin: content-box;
}

 cale()方案

如果我们仍然以左上角偏移的思路来考虑，其实希望它有一个100%-20px的水平偏移量，以及100%-10px的垂直偏移量。正好cale()函数允许我们执行此类运算，它可以完美的在background-postion属性中使用：

.test {
    width: 400px;
    height: 300px;
    background: url(111.png) no-repeat #58a;
    background-position: calc(100% - 20px) calc(100% - 10px);

}