灵活的背景定位

困难产生原因

• 针对容器某个角对背景图片做偏移定位，同时图片与边角之间有一定空袭

background-position 的扩展语法方案

• css3 中，它可以指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字

• 回退方案：没有间隙，但能把图片放在右下角

background-origin 方案

当 间隙与容器padding一致时，可采用这种方案

• background-origin 初始值是 padding-box，所以 background-position 才会从内边距开始，改成 conten-box 即可

  .box {
    padding: 10px;
    background: url('smlie.svg') no-repeat bottom right #58a;
    background-origin: content-box;
  }
  

calc() 方案

• 通过计算获得