本节要实现的效果是：背景图片距容器底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);