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

html

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

​ 备注：图片不能设置伪元素，所以需要外面套一层壳子，在壳子上获取焦点，添加样式

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的值为自己想要的颜色。

4.    // border示例代码
   .image-wrap {
      border: 1px solid transparent;
   
      &:focus {
          border-color: red;
      }
   }