Question

我有一张图片，我想在其上显示一些文字信息。我在它下面有一个包含信息的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; }

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

Answer 1

您可以position: absolute使用.book-info来定位.book：

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

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

请参阅demo。

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>

在网格中覆盖透明框css

2 个答案: