这个英雄部分具有强烈的视觉冲击力，背景中放置了循环视频。通过在后台播放品牌形象视频或产品演示视频，可以强烈吸引用户的注意力。

预览

Discover the New Digital Experience

Take your business to the next stage with the latest technology and sophisticated design. Let’s create the future together.

Get Started

Watch Demo

用例和功能

产品登陆页面：通过在后台显示实际产品来直观地传达价值。
企业网站：利用传达品牌氛围的电影图像营造专业印象。
活动公告页面：传达过去活动的兴奋和激动，增加参与动力。
特点：
- 通过使用“对象覆盖”，视频具有响应能力，因此无论屏幕尺寸如何，它都会覆盖整个背景。
- 半透明的黑色覆盖层（bg-black/50）放置在视频上，以确保文本可见性。
- 通过指定“playsinline”属性，即使在 iOS 设备上，游戏也将作为背景内嵌播放，而不是全屏播放。

设计和用户体验（Design & UX）的要点

确保对比度：由于视频的亮度会发生变化，因此调整叠加层的不透明度以使文本始终可读非常重要。
考虑加载速度：视频文件往往很重。我们建议您准备一个容量较小的MP4文件（最好也使用WebM）并设置一张海报图片（poster属性）。
动画：向内容元素添加淡入动画，以提供丰富的页面加载体验。

如何定制（定制指南）

更改叠加密度：将<div class="absolute inset-0 z-10 bg-black/50"></div>的bg-black/50设置为bg-black/70将使其更暗，设置bg-black/30将使其更亮。
为覆盖层着色：您还可以为覆盖层设置颜色以匹配您的品牌颜色，例如“bg-blue-900/60”。
调整高度：您可以通过将“h-[600px]”更改为“h-screen”（全屏）或“min-h-[80vh]”等来控制该部分的高度。

实现代码 (Implementation)

<section class="relative h-screen min-h-[600px] w-full flex items-center justify-center overflow-hidden font-sans">

<!-- Video background -->
<video
  autoplay
  loop
  muted
  playsinline
  poster="/assets/video-poster.jpg"
  class="absolute z-0 w-auto min-w-full min-h-full max-w-none object-cover"
>
  <source src="/assets/hero-background.mp4" type="video/mp4" />
  <source src="/assets/hero-background.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

<!-- Overlay (dark layer to improve visibility) -->
<div class="absolute inset-0 z-10 bg-black/60"></div>

<!-- Content -->
<div class="relative z-20 max-w-4xl mx-auto px-6 text-center text-white">
  <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-tight mb-6 animate-fade-in-up">
    Discover the New <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">Digital Experience</span>
  </h1>
  <p class="text-lg sm:text-xl md:text-2xl text-gray-200 mb-10 max-w-2xl mx-auto opacity-0 animate-fade-in-up animation-delay-200">
    Take your business to the next stage with the latest technology and sophisticated design. Let's create the future together.
  </p>
  <div class="flex flex-col sm:flex-row items-center justify-center gap-4 opacity-0 animate-fade-in-up animation-delay-400">
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors duration-300 shadow-lg hover:shadow-xl text-lg">
      Get Started
    </a>
    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white/10 backdrop-blur-md text-white border border-white/30 font-bold rounded-full hover:bg-white/20 transition-colors duration-300 text-lg flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      Watch Demo
    </a>
  </div>
</div>
</section>

<!-- 
* When using Tailwind CSS, you need to add an animation class for fade-in-up to 
tailwind.config.js or define it in your custom CSS.

CSS Example:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out forwards;
}
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
-->

浏览器支持

与最新版本的现代浏览器（Chrome、Firefox、Safari、Edge）配合良好。
通过添加playsinline属性，它将在iOS版本的Safari上自动内联播放。
如果iOS的“低功耗模式”打开或通信环境较差，自动播放可能会被阻止。因此，请务必在“poster”属性中设置替代图像。