web-dev-qa-db-fra.com

Bootstrap 3 superposition de légende d'image CSS

J'utilise bootstrap et ayant un problème pour superposer la légende sur une image, la div de légende ne peut tout simplement pas tenir dans la boîte, comme indiqué ci-dessous:

enter image description here

HTML:

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/cake.png" class="img-responsive" alt="">
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

CSS:

div.desc{
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #000;
    color: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

SOLUTION:

Merci à @himanshu d'avoir résolu le problème.

div.desc{
    background-color: #000;
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
}

.fix{
    width: 100%;
    padding: 0px;
}
csstwitter-bootstrap-3image-gallery
12
conmen

Je pense que le problème vient du placement plutôt que de la superposition, div.desc est absolu et l'image est son frère. Ainsi, la superposition ne suivra pas l'image, elle suivra uniquement la balise d'ancrage ou votre div.wrapper.

D'après ce que je peux voir, il y a une marge sur l'image ou le rembourrage dans l'ancre ou le wrapper.

La meilleure solution est de mettre desc et l'image dans un autre div avec une largeur de 100% avec 0 remplissage.

<div class="col-sm-4 wrapper">
    <a href="#">
<div class="fix">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div></div>
    </a>
</div>

CSS:

.fix{width:100%; padding:0px;}
3
himanshu

Pour ceux qui tentent de superposer une légende sur une image dans Bootstrap, envisagez d'utiliser des légendes de carrousel.

Voir ici: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

  <div class="carousel-caption">
    <h3>Chania</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  </div>
2
smntx

Essaye ça

 <div class="wrapper">
    <div class="">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
    </div>
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
 </div>
 <div class="wrapper">
    <div class="">
         <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
    </div>
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
 </div>

css

div.desc_content {
background-color: #000;
color: #FFF;
font: bold 11px verdana;
padding-left: 10px;
padding-top: 7px;
height: 23px; opacity: 0.7;
position: relative; 
top: -30px;
}
div.wrapper{
    float: left;
    position: relative;
    margin: 10px;
 }
2
Justin

Utilisez ces attributs pour la classe div.desc

div.desc{
    position: absolute;
    bottom: 0;
    background-color: #000;
    color: #fff;
    opacity: 0.5;
    left:0;   /** new  **/
    right:0;  /** new  **/
    filter: alpha(opacity=50);
}
1
Vitorino fernandes