hover时，添加border对background-image的影响及解决

由于需求，要实现hover时添加边框，原代码如下

 1 .item {
 2   position: relative;
 3   display: flex;
 4   flex-direction: column;
 5   width: 30%;
 6   border-radius: 4px;
 7   padding: 30px 20px;
 8   cursor: pointer;
 9   font-size: 14px;
10   letter-spacing: 1px;
11   line-height: 18px;
12   border: 2px solid transparent;
13   &:hover {
14     border: 2px solid #3c6ef0;
15   }
16   &.actived {
17     border: 2px solid #3c6ef0;
18     &::after {
19       position: absolute;
20       right: 0px;
21       top: 0px;
22       content: '';
23       display: block;
24       width: 32px;
25       height: 32px;
26       background: url('~@/assets/select/xuanzhong.svg') no-repeat;
27       background-size: contain;
28     }
29   }
30 }
31 .main {
32   background-image: url('~@/assets/select_category/background-main.png');
33 }

但是图片因此向边框方向重复填充，首先想到的是取消他的填充效果

.background {
  background-repeat: no-repeat;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}

但是填充虽然取消，图片却会产生抖动，直接放弃了修改background本身，改为修改border成背景色

.item {
  border: 2px solid white;
}

最终没有深究background的定位，而是单纯的解决了问题。