Tailwindcss 背景 - 带叠加层的视频

Question

一段时间以来，我一直在尝试寻找一种方法，将视频作为 div 中的背景，该 div 有一个叠加层，使其更暗。另外，div 容器中应该有文本，有没有人建议如何在 Tailwind 中执行此操作？

我已经这样介绍了整个事情。感谢您的想法和帮助。

Answer 1

您可以使用brightness-* 类实用程序在不使用其他元素的情况下应用filter 属性来使视频变暗。

<video class="... brightness-50"></video>

或者如果包含文本的元素与视频具有相同的宽度和高度，您可以使用backdrop-brightness-* 类实用程序将backdrop-filter 应用于div

<div class="w-full h-full backdrop-brightness-50">
   ...
</div>

Answer 2

假设视频为您的 div 提供“音量”，最简单的方法是使用如下结构：

https://play.tailwindcss.com/DS33YxNtF5

但是有上百万种方法可以实现这样的目标。还。这在很大程度上取决于其他各种因素，这些因素本身取决于您的页面结构等。

我不会为视频添加不透明度，因为连续渲染可能会很重。