视频背景上的顺风css图案
视频背景上的顺风css图案
提问于 2021-10-15 07:22:36
我是新手尾风，我有一个视频背景页面(基于帖子https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/)，我试图添加一个模式( http://www.patternify.com/ )的顶部的视频背景。我尝试了几种不同的方法，但它们都与背景的位置产生了奇怪的东西。
有人能告诉我在Tailwind中应该怎么做吗？
回答 1
Stack Overflow用户
发布于 2021-10-16 12:13:11
您可以使用relative和absolute实用程序类将超文本标记语言放置在视频上，如下例所示。iframe div包装了您需要的absolute视频。您可以使用width w-{size}和height 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.tailwindcss.com/QjG6jhiIdN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69587058
复制相关文章
相似问题
腾讯云开发者
