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

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

مرحله اول - اضافه کردن 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");
  حداقل ارتفاع: 380px;
  /* قرار دادن تصویر در وسط و مناسب‌سازی اندازه */
  موقعیت پس‌زمینه: وسط;
  تکرار پس‌زمینه: بدون تکرار;
  اندازه پس‌زمینه: پوشش کامل;
  /* نیاز به تعیین موقعیت ناوبری */
  موقعیت: نسبی;
}
/* قرار دادن ناوبری در داخل تصویر */
.container {
  موقعیت: مطلق;
  محدوده: 20px;
  طول: خودکار;
}
/* ناوبری */
.topnav {
  پر کردن: مخفی;
  رنگ پس‌زمینه: #333;
}
/* لینک‌های ناوبری */
.topnav a {
  شناور: چپ;
  رنگ: #f2f2f2;
  جذب نظر: وسط;
  پدینگ: 14px 16px;
  زیرخطی: none;
  حجم فونت: 17px;
}
.topnav a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}

آموزش رایگان