技巧3：灵活的背景定位

前面的话

在css2.1中， 如果想对容器的某个角对背景做偏移定位，我们只能指定距离左上角的偏移量，或者干脆完全靠齐到其他三个角。

例如：

    background-position: 50px 20px; 向右移50px，向下移20px.
    background-position: right bottom; 右下角
    background-position: left bottom; 左下角

如果我们想图片与容器的边角之间能留出一定的空隙（假如距离右下角有10px的空隙），使用css2.1比较麻烦。需要计算出背景图片距离左上角的偏移量，然后再把计算结果给background-position。如果当容器的尺寸不固定时，这时就不可能做到了。

如何解决这个问题呢？下面介绍3种方法background-position的扩展语法、background-origin方案、calc()方案。

background-position的扩展语法

background-position的扩展语法允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。

例如：

让背景图片跟右边缘保持20px的偏移量，同时跟底边保持10px的偏移量。

    div {
        max-width: 10em;
        min-height: 5em;
        padding: 10px;
        color: white;
        font: 100%/1 sans-serif;

       background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
       background-position:right 20px bottom 10px;
       
    }

background-origin方案

有时，我们会碰到这样一种情况：偏移量与容器的内边距一致。如果采用上面的background-position扩展方法，代码是这样的：

    padding: 10px;
     background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
    background-position:right 10px bottom 10px;

这样的代码不够DRY：每次改动内边距的值时，我们需要改动三个地方。我们有更简单的方法来实现。

定义与用法

我们来看看w3c是怎样定义background-origin属性的：

background-origin属性属性规定 background-position 属性相对于什么位置来定位。

语法

background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

了解background-origin属性之后，那么如何使用这个属性来改善上面的代码？

在默认情况下，background-position属性时以容器的padding-box来定位的，我们只需要改变属性值为content-box，使背景从内容盒子开始定位，自然就不会遮挡容器的padding部分。

    padding: 10px;
    background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a right bottom;
    background-origin: content-box;

calc()方案

calc()方法又是如何实现背景定位的呢？

我们还是将背景图片定位到距离底边10px且距离右边20px的位置。如果我们任然以左上角偏移的思路来思考，其实就是一个100% - 20px的水平偏移量，以及100% - 10px的垂直偏移量。

刚刚好calc()函数允许这样的运算，可以完美的在background-position属性中使用：

    background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a ;
    background-position: calc(100% - 20px) calc(100% - 10px);