[英]Opaque text over transparent box
I would like to have opaque text within my transparent box. 我想在透明框中包含不透明的文本。 Here is a code-sample:
这是一个代码示例:
HTML: HTML:
<div id="Transparent_Box">
<div class="text">
<h1>Some opaque text</h1>
</div>
</div>
CSS: CSS:
#Transparent_box {
url(../images/header-bg.png);
background:url(../images/header-bg.png) repeat-x\0/;
background-position:center bottom, left top;
background-repeat:repeat-x;
overflow:hidden;
background-color:#FFF;
opacity: 0.6;
filter: alpha(opacity=60);
}
.text {
float:left;
margin-top:30px;
width:490px;
margin-left:20px;
opacity: 1;
filter: alpha(opacity=100);
}
.text h1 {
font-weight:900;
color:#FFF;
line-height:34px;
margin-top:8px;
opacity: 1;
filter: alpha(opacity=100);
}
Because of inheritance, the text always appears transluscent. 由于继承,文本始终显得半透明。 Is there no way to get a nice opaque text over my transparent box?
有没有办法在我的透明盒子上得到漂亮的不透明文本?
Thanks that was exactly it... I have now also added a background which is a transparent .png It looks like this: 谢谢,这正是它......我现在还添加了一个透明的背景.png看起来像这样:
background-image:url(../images/header-shadow.png), url(../images/header-bg.png);
background:url(../images/header-bg.png) repeat-x\0/;
background-position:center bottom, left top;
background-repeat:repeat-x;
background-color: rgba(0,0,0,0)
This should work under IE8 and below. 这应该在IE8及以下版本下工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.