html - 在视频上叠加图像时如何保持图像背景透明度？

Question

我正在尝试创建一个带有循环视频的网站，该网站的背景是透明背景图像覆盖在视频上。我能够创建视频背景并覆盖图像，但是当我这样做时，图像的透明部分会被白色填充。当我只希望不透明的内容可见时，这会使我的图像看起来好像在白框中。有办法避免这种情况吗？

为了提供一些附加信息，图像和视频共享同一个父 div，图像位于视频之前。视频是mp4文件，图片是png。图片没有应用 CSS，视频目前应用了以下内容:

video {
    margin-top: 4em;
    width: 100%;
    object-fit: cover;
    filter: saturate(75%);
}

Answer 1

您需要提供更多代码来向我们展示问题。单独使用您的 video CSS，我无法重现该问题。

事实上，这是一个工作演示，您要求的工作正常:

div {
  position: relative;
}

img {
  pointer-events: none;
  position: absolute;
  top: -10%;
  width: 100%;
  z-index: 1;
}

video {
  object-fit: cover;
  filter: saturate(75%);
  width: 100%;
}

<div>
  <img src="https://i.imgur.com/VRV5rlZ.png">

  <video autoplay loop muted>
    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
  </video>
</div>