Question

好吧..我正在努力解决这个问题..

我的图像中有一个透明的“洞”，我在后面放了一个视频。但是，当视频在那里时，图像变得有点......去饱和。

这是CSS

  .header {
      position: relative;
  }

  .header img{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      cursor: pointer;
  }

  .header video{
      position: absolute;
      width: 168px;
      left: 553px;
      top: 109px;
      z-index: 1;
  }

标记

<div class="span12 header"><img src="img/screenshot-final.png"/><video src="img/video/video-final.mp4"></video></div>

我不确定为什么视频会影响图像，因为它的尺寸适合图像中的孔。但是，在视频上设置display：none会“修复”图像。

Answer 1

我很确定这是不可避免的，您是否考虑将图像置于视频顶部以适合具有适当z-index的孔。不理想，但我认为去饱和是覆盖图像的视频的标准！

编辑：尝试将视频放入div标签，并将图像放入div中的div标签内！然后用绝对定位来纠正定位！这应该排除你

编辑：

<div class="span12 header">
<video src="img/video/video-final.mp4"></video>
<div id="image">
<img src="img/screenshot-final.png"/>
</div>
</div>

图像背后的视频使图像不透明/去饱和

1 个答案: