One picture to achieve the selected effect

<div :class="{'focusImgBc':hoverService==service.quickSkip_title}">                          <i                              :class="{'focusImg':hoverService==service.quickSkip_title}"                              :style="quickIconStyle(service)"                              class="service-img"                          ></i>                      </div>

 

、

A picture to achieve the mouse selection effect

<div :class="{'focusImgBc':hoverService==service.quickSkip_title}">                          <i                              :class="{'focusImg':hoverService==service.quickSkip_title}"                              :style="quickIconStyle(service)"                              class="service-img"                          ></i>                      </div>

quickIconStyle(service) {               let src = 'background:' +                       (service.quickSkip_imgApiPath ?                               ('url(' + this.BACKEND_ROOT_URL + '/api/global_config/home_config/imgs/' + service.quickSkip_imgApiPath + '?token=' + this.$store.state.token.replace(' ', '%20'))                               : ('url(' + require('./../../../public/images/Home/geo-data-hover.png')))                       + ')0 0 /100% 100%;';                 let makrwb = '-webkit-mask:' +                       (service.quickSkip_imgApiPath ?                               ('url(' + this.BACKEND_ROOT_URL + '/api/global_config/home_config/imgs/' + service.quickSkip_imgApiPath + '?token=' + this.$store.state.token.replace(' ', '%20'))                               : ('url(' + require('./../../../public/images/Home/geo-data-hover.png')))                       + ')-1px -1px / calc(100% + 2px) calc(100% + 2px)';               return src + makrwb;           },

.focusImgBc {      width: 70px;      height: 70px;      display: inline-block;      background-color #007fea      border-radius 50%    }    .focusImg {      background-size: 0 !important      background-color: #fff9fc !important  }

principle ： Use picture as mask , Modify background color , The transparent area of the image will show the background color of its parent container （ Offset mask in code 1px, Remove the white edge ）