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

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

效果图

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;        
       }
    }
posted @ 2019-11-01 14:14  _冰  阅读(...)  评论(... 编辑 收藏