我有一个简单的CSS / HTMl问题。我在div中有一个图像和一些文本。我使用z-index将文本放在图像的顶部。
文字为白色,背景为黑色。我调整了文本的div的不透明度,以便下面的图像可见。看起来不错。
问题是文本显示为灰色而不是白色,因为不透明度降低了。如何让文字显示为白色,并且周围仍然有半透明的黑色背景?
<style type="text/css">
.wrap {
position:relative;
float:left;
clear:none;
overflow:hidden;
}
.wrap img {
position:relative;
z-index:1;
}
.wrap .desc {
display:block;
position:absolute;
width:166px;
top:20px;
left:20px;
z-index:2;
color: #FFFFFF;
padding: 10px;
background-color: #000000;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
/*For IE*/
filter: alpha(opacity=60);
opacity: 0.60;
}
</style>
<div class="wrap">
<img src="path/to/pic.png" />
<h6 class="desc">This is my text about my image</h3>
</div>
有什么建议吗?
答案 0 :(得分:3)
这样怎么样:
.mod {
position: relative;
width: 80px;
height: 100px;
padding: 5px;
}
.mod-text,
.mod-background {
position: absolute;
left: 0;
width: 100%;
}
.mod-text {
color: #FFF;
font-size: 1em;
text-align: center;
bottom: 0;
}
.mod-background {
background-color: #f58322;
border-radius: 8px;
filter: alpha(opacity=60);
opacity: 0.60;
top: 0;
height: 100%;
}
<div class="mod">
<img src="http://www.gravatar.com/avatar/d543f6789b58df56f6fed95291e78261.png" />
<div class="mod-background">
</div>
<div class="mod-text">
Hawt!
</div>
</div>
答案 1 :(得分:2)
根据您的浏览器支持要求,您可以将不透明度保持为100%并使用rgba
颜色:
background-color: rgba(0,0,0,0.5);
颜色为红色,绿色,蓝色(每个0-255),然后是Alpha(0-1.0)。
如果您需要在旧版浏览器中使用后备版,通常可以使用:
background-color: #000;
background-color: rgba(0,0,0,0.5);
旧版浏览器默认为黑色,新版浏览器默认为半透明。它避免了额外的下载(平铺图像),以及在文本文件中保留更多样式(更易于版本,维护和查找)。
答案 2 :(得分:2)
我会在描述之前创建另一个具有相同高度和宽度的div,将div的不透明度设置为透明,添加背景,然后将描述放在另一个div中,不带背景。如果他们都有绝对的位置,那么后者应该优先于前者。
请在此处查看demo。
答案 3 :(得分:1)
您可以在元素的背景中放置半透明图像。实际图像可能非常小,您可以重复它以覆盖整个背景。
.wrap .desc {
display: block;
position: absolute;
width: 166px;
top: 20px;
left: 20px;
z-index: 2;
color: #FFFFFF;
padding: 10px;
background: url('my-small-bg.png');
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
以下是一个示例:http://jsfiddle.net/f6XS6/1/