SOURCE

<!-- https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg -->
<div class="a"> 
</div>

<div class="b"> 
</div>

<div class="c"> 
</div>

/* 给背景图片设置距离某个角的偏移量 */

div {
    width: 400px;
    height: 400px;
    margin: 50px;
}


/* 方案一  background-position*/

.a {
    background: url(https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg ) no-repeat #58a;
    /* 它允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。 */
    background-position: right 20px bottom 10px;
    background-size: 50px 50px;
}


/* 方案二 设置偏移量与内边距保持一致，也可以用 background-position 但代码不够DRY，每次改动内边距都需要更新*/


/* background-position:默认是以 padding box 为准的
    通过background-origin: content-box;设置以内容为基准，就能和内边距保持一致
 */

.b {
    padding: 10px;
    background: url(https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg ) no-repeat #58a right bottom;
    background-size: 50px 50px;
    /* 设置position以内容的边距作为基准 */
    background-origin: content-box; 
}


/* 方案三 calc() */

.c {
    background: url(https://img95.699pic.com/photo/50017/0822.jpg_wh860.jpg) no-repeat #58a;
    background-size: 50px 50px;
    background-position: calc(100% - 20px) calc(100% - 10px);
}