时间戳

首页 > 解决方案 > Tailwind：如何将标题与英雄部分重叠？

tailwind-css - Tailwind：如何将标题与英雄部分重叠？

问题描述

我想将我的图像重叠到透明标题？如果没有 margin-top: -36px 部分，我怎么能做到这一点？谢谢在此处输入图像描述

<header class="bg-transparent  shadow-md sticky top-0 z-50">
   <div class="flex items-center justify-between">     
        <a href="#" class="border-2 border-red-500"><img class="h-8" src="/images/eco2.png" alt=""></a>
        <div class="border-2 border-red-500">
            <a class ="" href="#">Home</a>
            <a class ="" href="#">About Us</a>
            <a class ="" href="#">Contact Us</a>
            <a class ="" href="#">Projects</a>
        </div>
    </div>
    <div class="flex flex-col hidden">
        <a href="#" class="border-2 border-red-500">Home</a>
        <a href="#" class="border-2 border-red-500">About Us</a>
        <a href="#" class="border-2 border-red-500">Contact Us</a>
        <a href="#" class="border-2 border-red-500">Projects</a>
    </div>
</header>

<section class="h-screen  w-full bg-hero-pic" >
</section>

标签： tailwind-css

解决方案

试试这个，Tailwind Playground链接

在此处输入图像描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
        <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width"
    />
    <title>Tailwind Header by JsWizard</title>
    <!---
    You may need jQuery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    --->
    <style>
          /*
      You may need this for responsive background
      header {
        background: url('bg-425.jpg');
      }

      @media only screen and (min-width:640px) {
        header {
            background: url('bg-640.jpg');
        }
      }

      @media only screen and (min-width:768px) {
        header {
            background: url('bg-768.jpg');
        }
      }

      @media only screen and (min-width:1024px) {
        header {
            background: url('bg-1024.jpg');
        }
      }

      @media only screen and (min-width:1025px) {
        header {
            background: url('bg-max.jpg');
        }
      } */

          header {
            background:url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80');}
    </style>
  </head>
  <body>
    <nav id="nav" class="fixed inset-x-0 top-0 flex flex-row justify-between z-10 text-white bg-transparent">
      <div class="p-4">
        <div class="font-extrabold tracking-widest text-xl"><a href="#" class="transition duration-500 hover:text-indigo-500">Your Logo</a></div>
      </div>

      <!-- Nav Items Working on Tablet & Bigger Sceen -->
      <div class="p-4 hidden md:flex flex-row justify-between font-bold">
        <a id="hide-after-click" href="#home" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">Home</a>
        <a href="#about" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">About</a>
        <a href="#contactus" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">Contact Us</a>
        <a href="#products" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">Products</a>
      </div>

      <!-- Burger Nav Button on Mobile -->
      <div id="nav-open" class="p-4 md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </div>
    </nav>

    <!-- Opened Nav in Mobile, you can use javascript/jQuery -->
    <div id="nav-opened" class="fixed left-0 right-0 hidden bg-white mx-2 mt-16 rounded-br rounded-bl shadow z-10">
      <div class="p-2 divide-y divide-gray-600 flex flex-col">
        <a href="#home" class="p-2 font-semibold hover:text-indigo-700">Home</a>
        <a href="#about" class="p-2 font-semibold hover:text-indigo-700">About</a>
        <a href="#contactus" class="p-2 font-semibold hover:text-indigo-700">Contact Us</a>
        <a href="#products" class="p-2 font-semibold hover:text-indigo-700">Products</a>
      </div>
    </div>

    <header id="up" class="bg-fixed bg-no-repeat bg-center bg-cover h-screen relative">
      <!-- Overlay Background + Center Control -->
      <div class="h-screen bg-opacity-50 bg-black flex items-center justify-center" style="background:rgba(0,0,0,0.5);">
        <div class="mx-2 text-center">
          <h1 class="text-gray-100 font-extrabold text-4xl xs:text-5xl md:text-6xl">This is sample Header design</h1>
          <h2 class="text-gray-200 font-extrabold text-3xl xs:text-4xl md:text-5xl leading-tight">by JsWizard</h2>
          <div class="inline-flex">
            <button class="p-2 my-5 mx-2 bg-indigo-700 hover:bg-indigo-800 font-bold text-white rounded border-2 border-transparent hover:border-indigo-800 shadow-md transition duration-500 md:text-xl">Learn More</button>
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

推荐阅读