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的寬高面積 = 切出來的子圖的圖檔。