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

Posted 2020-12-01 guojbing

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

效果图

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

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