本节要实现的效果是：背景图片距容器底10px，距右边缘20px。

<b>解决方案一：background-position</b>

div { 
  background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat bottom right #58a; 
/*上面写bottom right的目的是为了在浏览器不支持bg-position定位的时候图片不至于默认贴近左上角*/
  background-position: right 20px bottom 10px;
}

<b>解决方案二：background-origin</b>
background-origin:padding-box/border-box/content-box;

盒模型.png

<b>background-origin:padding-box;</b>

    .bgOrigin{
        color: white;
        width: 500px;
        height: 500px;
        background: url("0.jpg") no-repeat #58a 100% 100%;
        padding:10px;
        border:10px solid hsla(0,0%,100%,.5);
        background-origin: content-box;
    }
    <div class="bgOrigin">
        哈喽！这里展示background-origin的效果~
</div>

padding-box.png

<b>background-origin:border-box;</b>

border-box.png

<b>background-origin:content-box;</b>
因为样式里设置了padding：10px;

content-box.png

<b>结论：当出现偏移量与容器的内边距一致时，我们就运用background-origin:content-box;就省去了写right 10px bottom 10px的麻烦，直接定义一个padding值就可以了。</b>

<b>解决方案三：calc( )</b>

background-position:calc(100% - 20px) calc(100% - 10px);