0

我正在尝试使 HTML5 视频的纯色背景与页面背景融为一体。

我试过使用mix-blend-mode虽然视频保持不变。有没有办法通过 CSS 做到这一点？

这是jsfiddle（视频背景应该像容器一样是灰色的）。我尝试了两种方法（主容器上的混合模式和视频的单独特殊容器上的混合模式。

这是代码：

<div id="container">

  <video width="320" height="240" controls>
    <source src="https://static.videezy.com/system/resources/previews/000/013/330/original/Thin_Smoke_80_-_4K_res.mp4" type="video/mp4">
  Your browser does not support the video tag.
  </video>
</div>

<div id="container-two">

  <div id="inner-container">



    <video width="320" height="240" controls>
      <source src="https://static.videezy.com/system/resources/previews/000/013/330/original/Thin_Smoke_80_-_4K_res.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
  </div>
</div>

JS

   video{
     mix-blend-mode:multiply;
   }
    #container{
      background-color:gray;
      height:500px;
      width: 100%;
      mix-blend-mode:multiply;
    }
    #container-two{
      background-color:gray;
      height:500px;
      width: 100%;
      mix-blend-mode:multiply;
    }
    #inner-container{
      background-color:gray;
      height:500px;
      width: 100%;
      mix-blend-mode:multiply;
    }
4

0 回答 0