如何从.mp4视频中删除背景？

Question

我在游戏网站上发现了一件有趣的事情。当您聚焦于某个按钮时，它会在悬停时添加

<video>

作为背景。但该视频是“mp4”格式，背景为黑色。有人可以解释一下开发人员是如何做到这一点的，这样我们就看不到黑色，而只能看到视频的透明部分。

它不像 webm 或某些 alpha chanel。他们是怎么做到的？

我不明白它是如何工作的。谁能告诉我如何删除`mp4`中的背景？

Answer 1

该网站正在使用

mix-blend-mode: screen

。

.d1, .d2, .d3 {
  display: flex;
  gap: 0.5em;
  justify-content: start;
  align-items: center;
  margin-bottom: 1em;
}

.s1, .s2 {
  width: 120px;
  aspect-ratio: 1;
  display: inline-block;
}

.s1 {
  background-image: url("https://picsum.photos/id/1000/240");
  background-size: contain;
  position: relative;
}

.s1 > .s2 {
  position: absolute;
  mix-blend-mode: screen;
}

.d1 .s2 {
  background-image: linear-gradient(45deg, rgb(0 0 0 / 1) 50%, rgb(255 0 0 / 1) 50%);
}

.d2 .s2 {
  background-image: linear-gradient(45deg, rgb(0 0 0 / 1) 50%, rgb(127 127 127 / 1) 50%);
}

.d3 .s2 {
  background-image: linear-gradient(45deg, rgb(0 0 0 / 1) 50%, rgb(255 255 255 / 1) 50%);
}

<p>examples of mix-blend-mode: screen</p>

<div class="d1">
  <span class="s1"></span> +
  <span class="s2"></span> =
  <span class="s1">
    <span class="s2"></span>
  </span>
</div>

<div class="d2">
  <span class="s1"></span> +
  <span class="s2"></span> =
  <span class="s1">
    <span class="s2"></span>
  </span>
</div>

<div class="d3">
  <span class="s1"></span> +
  <span class="s2"></span> =
  <span class="s1">
    <span class="s2"></span>
  </span>
</div>