视频背景顶部的顺风 css 模式

Posted 2023-03-07

【中文标题】视频背景顶部的顺风 css 模式

【英文标题】：Tailwind css pattern on top of video background

【发布时间】：2021-12-03 19:06:44

【问题描述】：

我是 Tailwind 的新手，我有一个视频背景页面（基于该帖子 https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/），我试图在该视频背景之上添加一个模式 (http://www.patternify.com/)。我尝试了几种不同的方法，但它们都对背景的位置产生了奇怪的影响。

谁能告诉我应该如何在 Tailwind 中完成？

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

您可以使用 relative 和 absolute 实用程序类将 html 放置在视频上，例如此示例。 absolute div 包装了您需要的 iframe 视频。 您可以定位您需要的图案，并使用宽度w-size 和高度h-sizeclasses 更改其大小。

<div class="relative">
  <div class="relative h-20 w-20 left-40 top-24 z-10" style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAGtJREFUKFNjZICCpkN+/+vsNjGCuMaZ1/4faYlg4BS+BOeDGYQUnZ2uxchIjCKQYWATcVkHMglmI043ISsCuZ0Rm8PRFYGt/v5W7z+y77ApAhmG4kZcinbVtkA8A9KBT5Gw1DKIGwkpAhkGAJGtf6rUDvXfAAAAAElFTkSuQmCC) repeat;"></div>
  <div class="absolute top-0 w-full">
    <iframe   src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

您可以在下一个游戏中查看示例。 https://play.tailwindcss.com/QjG6jhiIdN