Question

我正在为我的大学项目创建一个小网站，其中大部分是完整的，但我仍然坚持要如何添加功能。

如果您访问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;
}

Answer 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

上的示例

Answer 2

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

Answer 3

Rhino的想法很好，但是你想要将页脚栏的positioon设置为静态，所以它保留在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将文本绝对位置放在你想要的位置。

CSS帮助 - div over image

3 个答案: