css image div帮助

Question

我有下面的css代码和一个图像来显示它的输出.虽然有两件事我需要帮助.

1. 这段代码非常适合在照片上显示用户名,但是我今天注意到整天都在使用chrome时,我会点击链接将我带到带有此代码的图像的页面,它不会显示名称图像,它只显示图像下方的名称,透明的黑色div根本不可见,名称甚至不会在图像上,我会刷新页面,它会工作正常,可能导致这个,这是我的电脑表现得像是内存不足,这可能是问题的一部分吗？

2. 我想在图像的顶部做一个条形图,它是图像的宽度,可能像2-3像素高,背景颜色像蓝色.我想要完成的是femail用户那里将有一个粉红色条形图和男性不同的颜色.知道CSS的人可以帮我修改这个,以便做到最好

alt text http://i25.tinypic.com/2isxqoz.jpg

<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    padding: 5px;
    height: 5px;
    line-height: 4px;
    text-align: center;
    overflow: hidden;
}
div.imageSub div.blackbg {
    z-index: 2;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.5;
}
div.imageSub div.label {
    z-index: 3;
    color: white;
}
</style>

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
    <img src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
    <div class="blackbg"></div>
    <div class="label">Sara</div>
</div>

Answer 1

既然我已经为你编写了这段代码,那么我也尝试修复它似乎是合乎逻辑的......

似乎Chrome正在挣扎,因为它不知道元素的高度.让我们使用边距而不是定位

此外,由于您使用的是设置高度,您可以将所有位置放在一起并使用以下CSS(在这种情况下,您不需要上面的代码):

div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
    position: relative;
    margin: -15px 0 0;
    padding: 5px;
    height: 5px;
    line-height: 4px;
    text-align: center;
    overflow: hidden;
}
div.imageSub div.blackbg {
    z-index: 2;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.5;
}
div.imageSub div.label {
    z-index: 3;
    color: white;
}

编辑:你已经要求为性别做一个顶级栏.您可以使用以下HTML:

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
    <img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
    <div class="blackbg"></div>
    <div class="label">Sara</div>
</div>

使用以下CSS:

div.imageSub img.female { border-top: 10px solid red; }
div.imageSub img.male { border-top: 10px solid blue; }