CSS帮助 - 图像的div [英] CSS Help - div over image

问题描述

我为我的大学项目做了一个小网站，大部分是完整的，但我仍然坚持我应该如何添加一个功能。

I'm making a small site for my college project, most of it is complete but I'm stuck on how I should go about adding a feature.

如果您访问 http://wallbase.cc/toplist 等网站并翻转图片，您会看到一个小黑色条将出现在显示尺寸的图像的底部。我想把它添加到我的网站，但我不知道使用CSS规则为了获得黑色的条形图像显示ontop，我尝试过的其他一切都要么到图像的一边或浮动页面。

If you go onto a site like http://wallbase.cc/toplist and rollover an image you'll see a little black bar will appear on the bottom of the image showing the dimensions. I want to add this to my website but I don't know what CSS rules to use in order to get the black bar to show ontop of the image, everything else I've tried either goes to the side of the image or floats on the page.

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

The page will be generated with jQuery + DOM but the end result will look a bit like:

<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规则：

And my relevant CSS rules:

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

推荐答案

code>< div> 有背景图片？

How about having a master <div> with a background image?

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

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

And style them with CSS, or use JavaScript to set the images.

.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

这篇关于CSS帮助 - 图像的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！