在网格中覆盖透明框css

Question

我有一个图像，我想在上面显示一些文本信息。我在它下面有一个div，它包含信息，具有透明的背景和格式化的所有内容。我可以使用margin-top: -50%将其拉到图像上，但由于我使用的是网格（1140），当屏幕缩小时，事情就不匹配了。

以下是我目前所拥有的：

HTML（超薄）

.fourcol
  .book
    img src="#{book.image_url}"
    .book-info
      header
        h4.title
          = book.title
        h6.author
          = book.author
      p.description
        = book.description

相关CSS:

.book-info {
      margin-top: -62%;
      padding: 1em;
      padding-bottom: 1.5em;
      float: left;
      background-color: black;
      opacity: .8; }

书的信息如何缩放，使其底部总是在图像的底部？

Answer 1

您可以在.book-info上使用position: absolute将其相对于.book:定位

.book {
    position: relative;
    overflow: hidden; /* to clear the floats inside */
}
.book-info {
    position: absolute;
    bottom: 0;
}

请参阅演示。

Answer 2

您需要将包含信息的div放在一个也包含图像的包装器中。

<style type="text/css">
    #info 
    {
        position: relative;
        bottom: 0px;
        width: 100%;
        height: 4%;
        opacity: 0.5;
    }
    #theImage
    {
        width: 100%;
        height: 100%;
    }
    #wrapper
    {
         width: 15%;
         height: 15%;
         overflow: hidden;
    }
</style>
<div id="wrapper">
    <img id="theImage" src="..." alt="" />
    <div id="info">Information about the image</div>
</div>