Question

有可能吗？如果不可能，有人能给我一些好的解决方法吗？

这个小提琴将非常简单地解释我的问题
http://jsfiddle.net/9AWdz/

Answer 1

鉴于这种结构：

<div id="headerOut">
    <div id="headerIn"></div>
</div>
<div id="normalRed"></div>

您无法使用opacity设置执行此操作，因为headerOut的不透明度应用于headerIn的不透明度之上。 headerIn可以比headerOut更不透明，但永远不会更多。

但是，您可以通过谨慎设置color和background rgba()，并仔细设置子元素的不透明度来模拟所需的效果。< / p>

例如：

#headerOut {
    background-color:   rgba(0, 255, 0, 0.4);
    color:              rgba(0,   0, 0, 0.4);
}
#headerOut > img {
    opacity:            0.4;
}
#headerIn, #normalRed {
    background-color:   red;
    color:              black;
    opacity:            1;
}

对于IE 8及更低版本，只需让这些用户查看一个不那么华而不实的网站版本，或者像这样修补效果（使用IE的条件评论）：

<!--[if lt IE 9]>
<style type="text/css">
    #headerOut {
        background-color: #AFA;
        color: #888;
    }
    #headerOut > img {
        filter: alpha(opacity='40');
    }
</style>
<![endif]-->

See this in action at jsFiddle.

几乎任何其他东西都需要javascript。 EG：

使用原始布局......
让jQuery等克隆headerIn节点，将克隆附加到文档正文，然后将其直接覆盖在原始节点上。

Answer 2

您需要使用rgba作为背景

请参阅小提琴：http://jsfiddle.net/9AWdz/2/

是否可以使透明div的内容完全可见？

2 个答案: