Tailwind CSS 全屏视频标题

你可以说我老派，但我确实很喜欢看视频标题。虽然我的个人网站很少用到它们，但我喜欢为客户制作精彩的视频标题。

今天我想看看不用自定义 CSS 也能轻松实现这一点。我们只用Tailwind CSS提供的类。

最终结果是仅使用 Tailwind CSS 实现的令人惊叹的全屏视频标题。

Tailwind CSS 全屏视频标题

为了创建这个标题，我们利用了昨天的Tailwind 视差标题。它的设置非常相似，只是现在我们不让它产生视差滚动。

基本HTML结构如下：

<header>
  <div>
    Welcome to my site!
  </div>
  <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
  </video>
</header>

您可以看到我们使用了 header 标签。其中，我们有一个 div，用于放置位于视频顶部的块。
然后，我们还有一个 video 标签，用于放置一个或多个源。

我现在将写下最终HTML结构，然后介绍每节课的重要性。

<header class="relative flex items-center justify-center h-screen mb-12 overflow-hidden">
  <div
    class="relative z-30 p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl"
  >
    Welcome to my site!
  </div>
  <video
    autoplay
    loop
    muted
    class="absolute z-10 w-auto min-w-full min-h-full max-w-none"
  >
    <source
      src="https://assets.mixkit.co/videos/preview/mixkit-set-of-plateaus-seen-from-the-heights-in-a-sunset-26070-large.mp4"
      type="video/mp4"
    />
    Your browser does not support the video tag.
  </video>
</header>

用于标题的类：

• relative：使标题栏相对。我们将视频设置为绝对定位。
• flex：添加显示弹性，以便我们可以对齐内部的文本块
• items-center：垂直对齐文本块
• justify-center：水平对齐文本块
• h-screen：这增加了 100vh 的高度，因此它是视口的 100％。
• mb-12：我们为此添加了相当大的 margin-bottom（3rem）
• overflow-hidden：视频会比我们的标题稍大一些，所以我们不想显示溢出。

然后对于我们的覆盖文本块，我们使用以下类：

• relative：我们需要将其设置为相对，将其放置在视频的顶部
• z-30：这需要高于视频上的 z-index
• p-5：在每侧添加相等的填充（1.25rem）
• text-2xl：使文本更美观、更大（1.5rem）
• text-white：使文本变为白色
• bg-purple-300：漂亮的冷紫色
• bg-opacity-50：这可确保背景的不透明度为 50%。
• rounded-xl：添加漂亮的圆形边框

最后但同样重要的是，我们可以为视频元素添加类：

• absolute：视频是绝对定位元素
• z-10：我们给它的 z-index 比我们的文本块低
• w-auto：宽度可以自动调整
• min-w-full：我们需要将最小宽度设为 100%
• min-h-full：最小高度也一样
• max-w-none：取消设置默认最大宽度

这样，所有类就都设置好了。这样，我们就能只使用 Tailwind CSS 类就能得到一个非常漂亮的全屏视频标题了。

最终结果可以在这个 Codepen 上找到。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。