SOURCE

console 命令行工具 X clear

                    
>
console
<div class="gallery">
  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=641078681,1794571276&fm=27&gp=0.jpg" alt="" /><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=641078681,1794571276&fm=27&gp=0.jpg" alt="" /><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=641078681,1794571276&fm=27&gp=0.jpg" alt="" /><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=641078681,1794571276&fm=27&gp=0.jpg" alt="" /><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=641078681,1794571276&fm=27&gp=0.jpg" alt="" />
</div>

<figure class="bg-blend">

</figure>

<figure class="wrapper-blend">
  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=641078681,1794571276&fm=27&gp=0.jpg" alt="" />
</figure>
$forgive-green:hsl(120, 100%, 35%);
div{
  img{
    width: 200px;
    height: 100%;
    margin: 2em;
    transition: all 1s;
    filter: sepia() hue-rotate(90deg) saturate(200%);
    border-radius: 50%;
    &:hover{
      filter: none;
      box-shadow:  0 0 0 10px hsla(120,200%,60%,.6) ;
    }
  }
}
figure.bg-blend{
  width:200px;
  height: 200px;
  background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=641078681,1794571276&fm=27&gp=0.jpg") no-repeat $forgive-green ;
  background-size: cover;
  border-radius: 50%;
  background-blend-mode: luminosity;
  transition: all 1s;
  &:hover{
    background-color: transparent;
    box-shadow: 0 0 0 10px $forgive-green inset; 
  }
}

figure.wrapper-blend{
  background-color: $forgive-green;
  width: 200px;
  height: min-content;
  line-height:0;
  border-radius:50%;

  img{
    width: 100%;
    border-radius:50%;
    mix-blend-mode: luminosity;
  }
}