<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.