代码之家 › 专栏 › 技术社区 › Natalie Perret

如何在HTML<video>标签上应用白色“过滤器”(alpha 50%)?

css3 html

-1

Natalie Perret · 技术社区 · 6 年前

我正在寻找一种方法来添加一个“白色过滤器”的HTML之上,即基本上我希望视频看起来像是低于一个50%阿尔法白色层。

我签出css过滤器解决方案,但它不提供单色选项,有什么想法?

<video  
    poster="/assets/img/stuff.png"
    autoplay muted loop
    id="background-video">
    <source src="/assets/video/stuff.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

2 回复 | 直到 6 年前

1

Riccardo Volpe 6 年前

测试这个:

* {
  padding: 0;
  margin: 0;
  border: 0;
}
#video_container {
  width: 480px;
  height: 270px;
  position: relative;
  z-index: 0;
}
video {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: royalblue;
  z-index: 0;
}
#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
}

<div id="video_container">
  <div id="overlay"></div>
  <video  
         poster="/assets/img/stuff.png"
         autoplay muted loop
         id="background-video">
    <source src="/assets/video/stuff.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video><!--about poster attibute you used: https://www.w3schools.com/tags/att_video_poster.asp-->
</div>

2

0

Natalie Perret 6 年前

解决方案是:

<div class="overlay">
    <video  
        poster="/assets/img/stuff.png"
        autoplay muted loop
        id="background-video">
        <source src="/assets/video/stuff.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
     </video>
</div>

与

.overlay {
  z-index: 2;
  background: white;
  opacity: 0.5;
}