在響應式圖像上重疊

Question

http://jsfiddle.net/LFtHg/

我正在嘗試創建我的第一個響應式網站。 為此，我要包括一張圖片。 此圖像的標題應以透明疊加顯示。 但是，由於不透明度設置傳遞給子元素，我已從容器中刪除了文本。

我根本無法顯示疊加層（因為它里面沒有內容）。 我不能添加一個固定的高度，因為我想成像以響應瀏覽器大小的變化。 如何確保顯示？

謝謝你，J

編輯，以及在瀏覽器調整大小時縮放疊加層的最佳方法是什么。 我不確定這種方法是否可行。

Answer 1

首先，您可以使用RGBA背景（ background: rgba(0,0,0,.5); ）而不是使用不透明度。

其次，您需要為span.figcaption明確設置寬度（您也可以通過指定左右偏移屬性來實現）

也許這個演示http://dabblet.com/gist/2778608也可以幫助你（圖像可以是任何大小 - 調整瀏覽器窗口大小以查看所有內容的大小調整）。

Answer 2

將以下規則添加到現有示例中會有效地拉伸.figcaption元素以完全覆蓋.figure ， 小提琴 ：

.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}

您可以隨意將值調整為％設置，以便標題顯示為居中等。

順便說一句，你知道你的實施還沒有流動，對吧？