问可以使用html/javascript/css在img元素上打洞吗？

EN

img {
  -webkit-mask:
    linear-gradient(#fff,#fff) top   / 100% 50px, /* show 50px from the top */
    linear-gradient(#fff,#fff) bottom/ 100% 70px, /* show 70px from the bottom */
    linear-gradient(#fff,#fff) left  / 20% 100%,  /* show 20% from the left */
    linear-gradient(#fff,#fff) right / 40% 100%;  /* show 40% from the right */
  -webkit-mask-repeat:no-repeat;
  
  mask:
    linear-gradient(#fff,#fff) top   / 100% 50px,
    linear-gradient(#fff,#fff) bottom/ 100% 70px,
    linear-gradient(#fff,#fff) left  / 20px 100%,
    linear-gradient(#fff,#fff) right / 40px 100%;
  mask-repeat:no-repeat;
}

body {
 background:linear-gradient(to right,blue,red);
}

<img src="https://picsum.photos/id/1006/500/400" >

.box {
  width: 500px;
  height: 400px;
  position: relative;
  background-size: 0 0;
}

.box div {
  background: inherit;
  height: 100%;
}

.box:before,
.box:after,
.box div:before,
.box div:after {
  content: "";
  position: absolute;
  background-image: inherit;
  background-size: 500px 400px;
}

.box:before,
.box:after {
  left: 0;
  right: 0;
}

.box:before {
  top: 0;
  background-position:top;
  height: 20%;
}

.box:after {
  bottom: 0;
  background-position:bottom;
  height: 30%;
}

.box div:before,
.box div:after {
  top: 0;
  bottom: 0;
}

.box div:before {
  left: 0;
  background-position:left;
  width: 40px;
}

.box div:after {
  right: 0;
  background-position:right;
  width: 80px;
}

body {
  background: linear-gradient(to right, blue, red);
}

<div class="box" style="background-image:url(https://picsum.photos/id/1006/500/400)">
  <div></div>
</div>