CSS 帮助 - 图像上的 div答案

【问题标题】：CSS Help - div over imageCSS 帮助 - 图像上的 div
【发布时间】：2012-02-04 21:22:21
【问题描述】：

我正在为我的大学项目制作一个小网站，其中大部分已经完成，但我不知道应该如何添加功能。

如果您访问http://wallbase.cc/toplist 之类的网站并滚动图片，您会看到图片底部会出现一个小黑条，显示尺寸。我想将此添加到我的网站，但我不知道使用什么 CSS 规则来让黑条显示在图像顶部，我尝试过的所有其他内容要么放在图像的一侧，要么浮在上面页面。

页面将使用 jQuery + DOM 生成，但最终结果看起来有点像：

<div id="content">
    <div class="error" id="pretext">Showing x results</div>
    <div class="image"><img src="imagelink" height="200" width="200" alt="thumb"></img></div>
</div>

还有我的相关 CSS 规则：

#content {
    background: #FBFBFB;
    border: solid 1px #CCC;
    border-top: none;
    border-bottom: none;
    padding: 15px;
}

.image {
    width: 200px;
    height: 200px;
    border: 1px solid #CCC;
    display: inline-block;
    margin: 5px;
}

【问题讨论】：

标签： html css

【解决方案1】：

有一个大师<div>带背景图片怎么样？

<div class="image" style="background-image: ('/images/whatever.jpg');">
    <div class="footerBar">[content]</div>
</div>

并使用 CSS 设置样式，或使用 JavaScript 设置图像。

.image {
    width: 200px;
    height: 150px;
    position: relative;
}
.footerBar {
    background-color: lightGrey;
    position: absolute;
    bottom: 0px;
    width: 100%;
    overflow: none;
    display: none;
}
.image:hover .footerBar {
    display: block;
}

查看jsFiddle上的示例

【讨论】：

【解决方案2】：

尝试在要放置在图像上的 div 上设置 position: absolute。

【讨论】：

【解决方案3】：

Rhino 的想法不错，但您需要将页脚栏的位置设置为静态，以便它保留在 div.image 中

.image {
    width: 200px;
    height: 150px;
    background-image: url("/images/whatever.jpg");
    position:inline-block;
    border:1px solid green;
}
.footerBar {
    position: static;
    bottom: 0px;
    width: 100%;
    overflow: none;
}

<div class="image">
    <div class="footerBar">[content]</div>
</div>

否则，您必须使用 javascript 来查找图像相对于页面的位置，并使用更高的 z-index 将文本绝对定位到您想要的位置。

【讨论】：

我认为它们可以正常工作，请参阅更新的代码和 jsFiddle 演示。如果代码有问题，请告诉我。