在網格中覆蓋透明盒子css

我有一個圖像，我想要顯示一些文本信息。我有一個div下面包含的信息，透明背景和一切格式化。我可以使用margin-top: -50%將它拉到圖像上，但由於我使用的是網格（1140），所以當屏幕縮小的時候，事情並不匹配。在網格中覆蓋透明盒子css

這是我到目前爲止有：

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

哪有書信息刻度，它的底部總是在圖像的底部？

來源

2012-07-09 Chris

您可以使用position: absolute上.book-info它相對於定位到.book：

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

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

見demo。

來源

2012-07-09 00:41:36 bfavaretto

絕對混淆了與網格相關的定位 – Chris 2012-07-10 01:23:29

它不應該在'.book'上使用'position：relative'。你能在http://jsfiddle.net/上設置一個例子嗎？我們可以更容易地理解你在找什麼，以及你面臨的問題。 – bfavaretto 2012-07-10 01:59:24

http://jsfiddle.net/bg28d/1/我只做了一本書。在jsfiddle中它甚至不覆蓋，但在本地它確實。編輯：改變負的'邊緣頂部'修正了一下。寬度仍然關閉 – Chris 2012-07-10 02:22:22

您需要將包含信息的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-09 00:47:12

那麼.book可以作爲封裝嗎？所有這些都是圖片和描述 – Chris 2012-07-09 15:28:14

@Chris是的，只要.book在你的網格中是可擴展的。 – 2012-07-09 16:11:38

這雖然有些效果，但是當整本書中的橫幅出現時，它們並沒有對齊（由於描述的不同，它們是不同的尺寸） – Chris 2012-07-10 01:25:22

在網格中覆蓋透明盒子css

回答

相關問題