焦點元素，添加半透明遮罩

效果圖

html

<div class="image-wrap" tabindex="-1">
    <img class="img" src="路徑">
</div>

​ 備注：圖片是替換元素，圖片正常加載時，設置的偽元素不可見，只有當圖片加載失敗時，其偽元素才能看到。所以需要外面套一層殼子 class="image-wrap"，在殼子上獲取焦點，添加樣式。

scss

.image-wrap {
  width: 500px;
  height: 500px;

  &:focus {   
    @include translucent-mask(#0082f0); // 傳自己想要的顏色
  }

  img {
    max-width: 100%;
  }
}

/* 半透明遮罩 */
@mixin translucent-mask($color: #0082f0) {
  outline: 1px solid $color;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $color;
    opacity: 0.2;
  }
}

​ 備注：

1. 可以用border，不設置outline；

2. 獲取焦點前就讓元素自身就有border，border-color設置為transparent；

3. 在獲取焦點后改變border-color的值為自己想要的顏色。

// border示例代碼
.image-wrap {
border: 1px solid transparent;

   &:focus {
       border-color: red;        
   }

}
```