图片背景英雄区 Tailwind网站组件

<section class="relative h-screen bg-gray-900"> <div class="absolute inset-0 bg-gradient-to-r from-gray-900 via-transparent to-gray-900 opacity-70"></div> <div class="absolute inset-0 bg-black opacity-40"></div> <div class="relative h-full flex items-center justify-center text-white text-center"> <div class="max-w-4xl mx-auto px-4"> <h1 class="text-5xl md:text-8xl font-bold mb-6 tracking-tight">壮丽山河</h1> <p class="text-xl md:text-2xl mb-8 opacity-90">探索自然的无限魅力</p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="bg-white text-black px-8 py-4 rounded-lg font-semibold hover:bg-gray-200 transition-colors"> 开始探索 </button> <button class="border-2 border-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-black transition-colors"> 了解详情 </button> </div> </div> </div> </section> <style>
section {
                background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                                  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23334155" width="1200" height="600"/><polygon fill="%23475569" points="0,600 300,400 600,500 900,300 1200,400 1200,600"/><polygon fill="%2364748b" points="0,600 200,450 500,520 800,350 1000,420 1200,380 1200,600"/></svg>');
                background-size: cover;
                background-position: center;
            }
</style>