0

我有下面的 css 代码以及显示它的输出的图像。我需要帮助，但有两件事。

  1. 这段代码可以很好地在照片上显示用户名，但是我今天注意到，当我经常整天使用 chrome 时，当我单击一个链接，该链接会将我带到包含此代码的图像的页面时，它不会显示名称图像，它只会在图像下方显示名称，透明的黑色 div 根本不可见，名称甚至不会出现在图像上，然后我会刷新页面，它会正常工作，这可能是什么原因，这是当我的电脑表现得好像内存不足时，这可能是问题的一部分吗？

  2. 我想在图像顶部显示一个条形图，它是图像的宽度，大约 2-3 像素高，背景颜色为蓝色。我想要完成的是对于女性用户，那里会有一个粉红色的条形图，而男性则有不同的颜色。知道css的人可以帮我修改这个以做到最好吗

替代文字

<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>
4

1 回答 1

5

由于我已经为您编写了此代码，因此我也尝试修复它似乎是合乎逻辑的......

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; }
于 2009-07-28T05:44:22.887 回答