灵活的背景定位

困难产生原因

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

background-position 的扩展语法方案

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

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

  

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

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

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() 方案

• 通过计算获得

  .box {
    background: url('smlie.svg') no-repeat #58a;
    background-position: calc(100% - 10px) calc(100% - 5px)
  }