چگونه ناوبری را بر روی تصویر ایجاد کنیم

چگونه ناوبری را بر روی تصویر ایجاد کنیم

مرحله اول - اضافه کردن HTML:

ایجاد ناوبری:

<div class="bg-img">
  <div class="container">
    <div class="topnav">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>

مرحله دوم - اضافه کردن CSS:

تنظیمات استایل ناوبری:

.bg-img {
  /* تصویری که استفاده می‌شود */
  رنگ-پس‌زمینه: url("img_nature.jpg");
  حداقل-ارتفاع: 380 پی‌اچ‌اس;
  /* قرار دادن تصویر در مرکز و کوچک‌سازی مناسب */
  محل-پس‌زمینه: مرکز;
  تکرار-پس‌زمینه: بدون تکرار;
  اندازه-پس‌زمینه: پوشش;
  /* نیاز به تعیین مکان ناوبری */
  وضعیت: نسبی;
}
/* قرار دادن محفظه ناوبری در داخل تصویر */
.container {
  وضعیت: قطعی;
  مجذور: 20 پی‌اچ‌اس;
  طول: خودکار;
}
/* ناوبری */
.topnav {
  مبالغه: مخفی;
  رنگ-پس‌زمینه: #333;
}
/* لینک‌های ناوبری */
.topnav a {
  شناور: چپ;
  رنگ: #f2f2f2;
  تراز-نویسی: center;
  پدینگ: 14 پی‌اچ‌اس 16 پی‌اچ‌اس;
  تزئین-نویسی: none;
  فون-サイズ: 17 پی‌اچ‌اس;
}
.topnav a:hover {
  رنگ پس‌زمينه: #ddd;
  رنگ: سياه;
}

آموزش خود را امتحان کنید