<div class='picture'></div>
<div class="shadow"></div>
$bg = "https://drscdn.500px.org/photo/111353513/q%3D80_m%3D2000/v2?sig=661525c8589f3195324f8dddbf42a700bba7f6aafe9c7c2cb8d73c870102e1e2"
$mask = "https://i.loli.net/2021/07/12/KCxwVWYQHfaiTO6.png"
.shadow
  width 700px
  height @width
  filter drop-shadow(3px 3px 5px black)
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  margin auto
  &:after
    content ''
    width 100%
    height 100%
    background url($bg) center/cover
    -webkit-mask url($mask) center/100% 100% no-repeat
    mask url($mask) center/100% 100% no-repeat
    display block
.picture
  width 700px
  height @width
  background url($bg) center/cover
    
      
// 背景色
body
  width 100vw
  height 100vh
  background #1d1e22
  display flex
  justify-content center
  align-items center
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.