Dev Faq
0
votes

Comment mettre un div sur une image sans couvrir tout le reste?

Bonjour, j'essaie de faire une page d'accueil pour mon projet d'école et j'essaie de mettre une boîte de texte sur mon image. Je joue avec position: absolu / relatif mais l'image couvre simplement ma barre de navigation à chaque fois que je le rends absolu et que la DIV ne va pas sur le dessus. Je ne sais pas si je l'ai bien expliqué, mais c'est ce que j'ai:

p> 

<div class="navbarcontainer">
  <ul class="navbar">
    <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
    <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
    <li class="navbarlogo"><img class="navbarimg" src="image.png"></li>
  </ul>
</div>
<div class="covercontainer">
  <img class="image1" src="#">
  <div class=cover></div>
</div>

2 commentaires

Vous partagez un code avec vos images locales. Ce code ne reproduit pas votre problème. Veuillez utiliser des images d'espace réservé afin que le code que vous partagez reproduit votre situation actuelle. J'ai édité votre question avec un snippet de code (veuillez utiliser cela à l'avenir, donc il est facile pour nous de déboguer votre code)

désolé je n'ai pas posté ici avant et merci

5 Réponses :

0
votes

Vous recherchez une solution comme celle-ci?

La meilleure façon pour cette approche est d'utiliser une image d'arrière-plan plutôt que d'utiliser une image. Si vous êtes toujours nécessaire d'utiliser une image, effectuez l'étape suivante pour placer la couverture div sur l'image. P>

  1. Ajouter Position: relatif; code> pour le conteneur div code> li>
  2. Ajouter Position: Absolute; TOP: 0; CODE> POUR LES ENFANTS DIVS. LI> ol>

    p> 

    <div class="navbarcontainer">
    <ul class="navbar">
    <li class="navbarlist">
        <a class="navbarlink" href="#">Contact Us</a>
    </li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist">
        <a class="navbarlink" href="#">Attractions</a>
    </li>
    <li class="navbarlist">
        <a class="navbarlink, active" href="#">Home</a>
    </li>
    <li class="navbarlogo"><img class="navbarimg" src="image.png"</li>
    </ul>
</div>
<div class="covercontainer">
    <img class="image1" src="https://www.w3schools.com/html/pic_trulli.jpg" />
    <div class="cover"></div>
</div>

1 commentaires

Oui ça a fonctionné exactement comment je voulais merci :)

0
votes

Si vous souhaitez que votre image soit derrière, utilisez simplement image-image propriété dans CSS . Si vous souhaitez toujours utiliser une balise img pour votre image, assurez-vous que votre élément parent a Position: relative et les deux éléments enfants, c'est-à-dire, img et DIV Les éléments ont Position: absolu et contrôlez leur ordre d'empilement à l'aide de z-index Propriété similaire IMG {Position: Absolute; z-index: 1} et .child-elem {position: absolu; z-index: 2} .

0 commentaires
0
votes 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <div class="navbarcontainer">
      <ul class="navbar">
        <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
        <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
        <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
        <li class="navbarlogo"><img class="navbarimg" width="80px" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></li>
      </ul>
    </div>
    <div class="covercontainer">
      <img class="image1" src="https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg">
      <div class="cover"/>
    </div>
  </body>

</html>

0 commentaires
0
votes

Je suppose que votre problème était à cause de "flotteur" dans la barre de navigation qui n'a pas de hauteur. @Nitheesh Répondez au problème. 

.navbarcontainer {
    width: 100%;
    display: inline-block;
}

0 commentaires
0
votes

Tout d'abord, il suffit d'ajouter clairement: les deux en classe CoverContainer
Comme ceci xxx pré>

aussi je définit opacité 0,5 et hauteur / largeur 50% pour le couvercle de sorte que l'image et la couverture peuvent apparaître. P>

second, si vous enlevez simplement le flotteur de La classe NAVBar fonctionnera alors bien aussi. p>

p> 

<div class="navbarcontainer">
  <ul class="navbar">
    <li class="navbarlist"><a class="navbarlink" href="#">Contact Us</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">History</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Events</a></li>
    <li class="navbarlist"><a class="navbarlink" href="#">Attractions</a></li>
    <li class="navbarlist"><a class="navbarlink, active" href="#">Home</a></li>
    <li class="navbarlogo"><img class="navbarimg" src="https://www.gravatar.com/avatar/4966b63e30afddb188b43a1d9a874519?s=48&d=identicon&r=PG&f=1"></li>
  </ul>
</div>
<div class="covercontainer">
  <img class="image1" src="https://ipsumimage.appspot.com/600x250?l=Ipsum%20Image&f=ffffff">
  <div class=cover>Div Text</div>
</div>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor