Comment créer : une barre de navigation sur une image

Comment créer une barre de navigation sur une image

Première étape - Ajouter HTML :

Créer une barre de navigation :

<div class="bg-img">
  <div class="container">
    <div class="topnav">
      <a href="#home">Accueil</a>
      <a href="#news">Nouvelles</a>
      <a href="#contact">Contact</a>
      <a href="#about">À propos</a>
    </div>
  </div>
</div>

Deuxième étape - Ajouter CSS :

Définir les styles de la barre de navigation :

.bg-img {
  /* Image utilisée */
  image-fond: url("img_nature.jpg");
  hauteur-min: 380px;
  /* Centrer l'image et l'agrandir de manière appropriée */
  position-fond: centre;
  répétition-fond: sans-repétition;
  taille-fond: couvrir;
  /* Nécessaire pour positionner la barre de navigation */
  position: relatif;
}
/* Placer le conteneur de la barre de navigation à l'intérieur de l'image */
.container {
  position: absolu;
  marge: 20px;
  largeur: auto;
}
/* Barre de navigation */
.topnav {
  excès: caché;
  couleur-fond: #333;
}
/* Liens de la barre de navigation */
.topnav a {
  flottant: gauche;
  couleur: #f2f2f2;
  alignement-texte: center;
  marge: 14px 16px;
  decoration-texte: none;
  taille-police: 17px;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Essayez-le vous-même