我有下面的 CSS 代码和一张图片来显示它的输出。我需要两件事的帮助。
这段代码非常适合在照片上显示用户名,但是我今天注意到,当我整天使用 chrome 时,当我点击一个链接,该链接会将我带到包含带有这段代码的图像的页面时,它不会在图像上显示名称,它只会在图像下方显示名称,透明的黑色 div 根本不可见,名称甚至不会出现在图像上,然后我会刷新页面,它会工作好的,这可能是什么原因造成的,当时我的 PC 表现得好像内存不足,这可能是问题的一部分吗?
我想在 图像的顶部是 图像的宽度,也许 2-3 像素高,有一个 像蓝色的背景颜色。什么 我想要完成的是为了 femail用户会有粉红色 酒吧那边的图像和不同的 男性的颜色。可以有人谁 知道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>
最佳答案
既然我已经为您编写了这段代码,那么我也尝试修复它似乎合乎逻辑......
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; }
关于css - 使用 CSS 为图像添加彩色条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1192101/