3. 灵活的背景定位

background-position

background-position可以指定距离任意角的偏移量

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

background-origin

默认情况下，background-position 是以 padding-box 为准的，即以padding-box的边框计算距离
background-origin可以改变这种行为
改成content-box则可以让背景图片到指定角的距离等于padding

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

calc函数

计算left top的距离
-两边必须要有空格

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