时间戳

首页 > 解决方案 > 视频背景顶部的顺风 css 模式

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

问题描述

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

有人可以告诉我应该如何在 Tailwind 中完成吗？

标签： csstailwind-csstailwind-in-jstailwind-ui

解决方案

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

<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.tai​​lwindcss.com/QjG6jhiIdN

推荐阅读