3-1 background-position

指定背景图片距离任 意角的偏移量,只要我们在偏移量前面指定关键字
3.背景定位 - 图1

  1. .box{
  2. width: 200px;
  3. margin-left: 100px;
  4. height: 150px;
  5. background: url(images/bg.png) no-repeat #58a;
  6. background-position: right 20px bottom 10px;
  7. background-size: 100px 80px;
  8. }

calc() 方案

background-position: calc(100% -20px) calc(100% -10px);
                     水平方向              垂直方向

3-2 background-origin

3.背景定位 - 图2 3.背景定位 - 图3
content-box content-box

    .box{
        width: 200px;
        margin-left: 100px;
        height: 150px;
        background: url(images/bg.png) no-repeat #58a bottom right;
        background-size: 100px 80px;
        background-origin:   content-box||padding-box;
        padding: 10px;
    }