Bootstrap 3 CSS image caption overlay

Я использую bootstrap и с проблемой наложения заголовка на изображение, заголовок div просто не может поместиться в поле, как показано ниже:

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);
}

устранение:

спасибо @himanshu, чтобы решить эту проблему. 

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

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

4 ответов

Я думаю, что проблема заключается в размещении, а не в наложении,div.desc абсолютная и образ ее брата. Таким образом, наложение не будет следовать изображению, оно будет следовать только тегу привязки или вашему div.wrapper.

из того, что я вижу, есть поле на изображении или заполнении в якоре или обертке.

лучшее решение-поставить desc и в div С шириной 100% с 0 прокладками.

<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

попробуй такое

 <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

для других, пытающихся наложить заголовок на изображение в Bootstrap, рассмотрите возможность использования заголовков карусели.

смотрите здесь: 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

используйте эти атрибуты для div.desc class

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