不透明度传播

我遇到了问题。我想要内容div的透明背景。但并非全部内容。我不能得到这个工作：不透明度传播

<div class="notTransparent"> <div class="transparent"></div> content </div>

是否有另一种解决方法？

来源

2010-10-08 dododedodonl

也许你也可以发布'.transparent'和'.notTransparent'的CSS规则？ – 2010-10-08 23:40:30

只是为了澄清;你没有你的'div'标签吗？你说的是外面透明的，但里面是不透明的，对吧？ – 2010-10-08 23:40:47

@Andrew Barber：我认为divs是正确的方式 - 我认为dododedodonl（我应该得到一个提高评分只是为了拼写正确！）是他们希望单词“content”不透明，但是后面的div稍微透明。这样一个稍微褪色的背景可以放在单词“内容”后面。但是，这个词应该在它自己的div中，就像我的答案一样。结果是外面板后面的任何东西都看不见，透明格内的任何东西都会稍微褪色，而外面的任何东西都是完全不透明的。 – ClarkeyBoy 2010-10-10 22:44:07

我想我已经做到了这一点（虽然它是很久以前）。你所做的是有一个与显示div：relative，然后另一个div与显示：绝对，左：0px，顶：0px，宽度：100％，高度：100％。也许应用z-index：-10（将其放在所有其他内容之后）。然后，您将正常情况下的顶级（相对）div内的内容。给我几分钟，我会制定出亚代码...

好做到这一点 - 请尝试以下操作：

.transparent { 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
} 
.opaque { 
    position: relative; 
} 
.content { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

<div class="opaque"> 
    <div class="transparent"> 
     <img src="/Images/header1.png"/> 
    </div> 
    <div class="content"> 
     Hello world! 
    </div> 
</div>

可惜我不能找到一种方法，将一个相对元素在透明DIV。如果有人找到方法，请在此处粘贴代码。顺便说一下，实际上不需要指定任何z索引。

来源

2010-10-08 23:41:01 ClarkeyBoy

CSS RGBA

http://www.css3.info/preview/rgba/ http://www.css3.info/preview/opacity/

来源

2010-10-08 23:41:03 Dave

这是否在IE 6,7,8？ – dododedodonl 2010-10-09 00:04:27

没有。对于IE7 +，您可以使用透明（1x1）PNG作为条件样式表中的回退。对于IE6，除非你正在为中国或印度建立一个网站，否则就不要这么做。 – Dave 2010-10-09 00:27:37

我也遇到了继承问题的透明度而回，这并获得成功对我来说：http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack （demo）。

来源

2010-10-08 23:41:24 Alec

不透明度传播

回答

相关问题