background-position切圖

老生常談，網上也很多，但是還是記下。

.overview-user-icon {
    background-image: url('../../../../static/imgs/overview-201811161524.svg');
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: 475% 458.3333333333333%;
    margin-right: 10px;
    vertical-align: middle;
    margin-top: -2px;
    background-color: #cdf;
    border-radius: 24px;
    background-position: 35.56% 0.7799999999999999%;
    background-repeat: no-repeat;
}

主要就是通過定位背景圖片的起始位置，然後寬高以div設置的寬高爲面積，使得需要定位的背景圖片中某個需要切出來的起始位置（左上角）跟div的左上角重合，這樣就可以整個div的背景圖就是某個子圖。

背景圖定位的background-position位置 + div的寬高面積 = 切出來的子圖的圖片。