2-3 弹性背景定位（属性background-position

---

知识储备

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

思考：
汪汪！！我怎么还是单身狗