你可以在CSS中使用mask-image和CSS filter来实现这一点。
下面的例子使用一个透明的PNG，用一个圆圈作为蒙版，filter属性模糊下面的图像。

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 400px;
  height: 300px;
  margin: 1em auto;
  position: relative;
}

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-size: cover;
  mask-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.container img.overlay {
  filter: blur(10px);
}

.container img.underlay {
  -webkit-mask-image: url(https://i.imgur.com/l4o4AkX.png);
  mask-image: url(https://i.imgur.com/l4o4AkX.png);
  z-index: 2;
}

<div class="container">
  <img class="underlay" src="https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fballoons.jpg?v=1597755892826" alt="Balloons">
  <img class="overlay" src="https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fballoons.jpg?v=1597755892826" alt="Balloons">
</div>