基础-磨砂玻璃效果

给文字打码，码的效果类似于磨砂玻璃。涉及到透明、背景滤镜。

 <h1>露出鸡脚了吧</h1>
 <div class="modal"></div>

 .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.4);
    backdrop-filter: blur(3px);// 元素后面的东西变模糊
  }

backdrop-filter还可以做一些比较有趣的效果,比如鼠标移入之后，灰白图片变为彩色。

.box{
//将彩色图片设为背景
  position: relative;
  background: url("@/assets/imgs/pic.jpg") no-repeat;
  background-size: contain;
  
   .modal {
   // 将 div 盖住图片
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 2s;
    backdrop-filter: grayscale(1);//设为灰色
    border-left: 5px solid #24272d;
  }
  &:hover .modal{
    width: 0;
  }
}