Можно ли сделать отверстие в элементе img, используя html / javascript / css?

Question

Я занимаюсь разработкой веб-сайта, фон которого частично должен быть прозрачным, потому что за ним должно проходить видео. Фон - это изображение. Кроме того, мне нужно убедиться, что сайт работает на Opera версии 11.

Есть ли способ сделать дыру в элементе изображения, принимая во внимание, что сайт должен работать в браузере Opera 11? <img src='http://ip/cutaholeinme.png'>

Таким образом, в конце отображается следующее image with a hole; (белый прямоугольник должен быть прозрачным)

Answer 1

A mask может легко сделать это

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://i.picsum.photos/id/1006/500/400.jpg" >

Для лучшей поддержки вы можете рассмотреть SVG-маску: Как применить фон только для определенных c элементов?

---

Вы также можете рассмотреть трюк с несколькими элементами, как показано ниже:

.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://i.picsum.photos/id/1006/500/400.jpg)">
  <div></div>
</div>