CSS背景定位

灵活的背景定位

问题

针对某一个特定容器的某一个角对背景做偏移定位

background-position方案

CSS3中对background-position属性进行了扩展，允许我们指定背景图片距任意角的偏移量，只要在偏移量前面指定关键字即可。

.div_bg{
            height: 200px;
            width: 200px;
            margin: 180px auto;
            background: url(./pig.png) no-repeat bottom right #FAC;
            background-position: right 20px bottom 10px;
        }

效果图

回退方案: 把老套的bottom right定位写进background属性中

background: url(./pig.png) no-repeat bottom right #FAC;

background-origin方案

场景：
在给背景设置距离某一个角的偏移量时，偏移量与内边距一致是极其常见的，使用background-position属性，css如下：

.div_bg{
            padding: 10px;
            background: url(./pig.png) no-repeat bottom right #FAC;
            background-position: right 10px bottom 10px;
        }

缺点： 每次改动内边距时都要修改三个位置的值，代码不够DRY(Don’t repeat yourself )

默认情况下，background-position 是以padding box为准的，这样边框才不会遮住背景，top left默认指的是pading box的左上角
CSS3新增属性background-origin可以改变这种行为，若将它的值改为content-box,那么background-position 使用的边角关键字就会以内容区域为基准。

.div_bg{
            height: 200px;
            width: 200px;
            margin: 180px auto;
            padding: 10px;
            background: url(./pig.png) no-repeat bottom right #FAC;
            /* background-position: right 10px bottom 10px; */
            background-origin: content-box;
        }

必要的时候我们可以把background-position和 background-origin组合起来使用。如果偏移量与内边距稍稍有些不同（内敛或者超出）
如下所示，用background-origin: content-box; 同时使用background-position设置偏移量（正值或负值）

 .div_bg{
            height: 200px;
            width: 200px;
            margin: 180px auto;
            padding: 10px;
            background: url(./pig.png) no-repeat bottom right #FAC;
            background-position: right 0px bottom 20px;
            background-origin: content-box;
        }

效果图

calc()方案

以左上角偏移的思路来考虑，距底边10px，右边20px就是希望它能有一个100% - 20px的水平偏移和100% - 10px的垂直偏移。calc()允许我们进行这类运算并且可以在background-position属性中使用。

.div_bg{
            background: url(./pig.png) no-repeat #FAC;
            background-position: calc(100% - 20px) calc(100% - 10px);
        }

注意：
calc()函数内部的-和+运算符两侧要各加一个空格，否则会产生解析错误

参考
https://www.w3.org/TR/css-backgrounds-3/