css圖像div幫助

Question

我有下面的CSS代碼以及一個圖像來顯示它的輸出。儘管有兩件事我需要幫助。

1. 此代碼的工作相當不錯，顯示照片的用戶名，但是我今天發現在使用鉻整天常常當我點擊會帶我到具有圖像與此代碼的網頁的鏈接，它不會在圖像上顯示名稱，只會在圖像下方顯示名稱，並且透明黑色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

自從我寫了這個代碼對你來說，似乎是合乎邏輯我也嘗試修復它...

看來鉻是掙扎，因爲它不知道元素的高度。讓我們用利潤，而不是定位

此外，由於您使用的是一套高度，你可能會下降的定位都在一起，並使用下面的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; }