0

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

这是我到目前为止所拥有的：

HTML（在 Slim 中）

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

图书信息如何缩放以使其底部始终位于图像的底部？

4

2 回答 2

1

您可以使用position: absoluteon.book-info将其相对于 定位.book：

.book {
    position: relative;
    overflow: hidden; /* to clear the floats inside */
}

.book-info {
    position: absolute;
    bottom: 0;
}

见演示。

于 2012-07-09T00:41:36.857 回答
0

您需要将包含信息的 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>
于 2012-07-09T00:47:12.767 回答