知识储备
1.background-position: 设置背景图像的起始位置
具体参数请戳
http://www.zgguan.com/doc/w3c/css/pr_background-position.asp.htm
2.background-orign:规定 background-position 属性相对于什么位置来定位
参数：padding-box|border-box|content-box
Tips:对背景色无效，对背景图片起作用
小测试
小狗狗图片，哦呜哦呜~~~~~
html
<div class="doges1">
Code doges1
</div>
css
解法1：background-position可延展写法（满足大多数浏览器）
width: 300px;
height: 200px;
margin: 0 auto;
background: url("doges.png") no-repeat #cccccc;
background-position: right 20px bottom 10px;
解法2：padding解法+box-sizing
width: 300px;
height: 200px;
background: no-repeat #cccccc bottom right;
background-image: url("doges.png");
padding: 0 20px 10px 0;
background-origin: content-box;//!背景图从内容区域开始绘制
box-sizing: border-box;
解法3：calc()解法
width: 300px;
height: 200px;
margin: 20px auto;
background:url("doges.png") no-repeat #cccccc bottom right;
background-position: calc(100% - 20px) calc(100% - 10px);
Tips: calc()里的-和+运算符周围要留空格
结果：
距底部10px 右侧20px的dog
思考：
汪汪！！我怎么还是单身狗
