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

【问题标题】：Tailwind css pattern on top of video background视频背景顶部的顺风 css 模式
【发布时间】：2021-12-03 19:06:44
【问题描述】：

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

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

【问题讨论】：

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

标签： css tailwind-css tailwind-in-js tailwind-ui

【解决方案1】：

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

<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 width="800" height="600" 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

【讨论】：