Div样式继承问题

我想嵌入一个DIV在另一个DTE中，而不继承包装DIV的不透明度样式。Div样式继承问题

样式代码：

#outer { 
background-color: #000; 
width: 400px; 
height: 400px; 
z-index: 0; 
opacity: 1; 
} 

#inner { 
background-color: #000; 
width: 200px; 
height: 200px; 
z-index: 1; 
opacity: 0.5; 
}

HTML代码：

<div id="outer"> 
    <div id="inner"> 
    </div> 
</div>

我已经尝试了一些不同的解决方案，但都没有工作至今。

来源

2011-11-28 Andy

该div是否需要嵌套？我一直通过使用绝对定位在透明div上放置一个不透明的div来解决这个问题。 –

您可以使用CSS3s rgba属性来解决该问题（适用于颜色）。

background-color: rgba(0, 0, 0, .7);

如果你想支持不支持CSS3或rgba财产旧的浏览器（或当你有背景图片），这里是链接到其他可能的解决方案：

其他跨浏览器解决方案是使用半透明PNGs为您的divs。

来源

2011-11-28 13:59:40 Sarfraz

如果您只想要颜色，请定义答案。 +1 – scottheckel

@Hexxagonal：更新，谢谢:) – Sarfraz

是的，这是唯一的解决方案！这个答案说明了这一切 – peduarte

-1

这是不可能的。不透明度将应用于所有内容。 See the spec for more information。

来源

2011-11-28 13:59:19 scottheckel

感谢您对正确答案进行反对投票。 – scottheckel

你没办法做那个人。

两种解决方案，如果它只是背景颜色，你可以：

使用透明的PNG图片
使用RGBA。例如，对于具有60％透明度的黑色：background-color: rgba(0, 0, 0, .6);

来源

2011-11-28 14:02:06 peduarte

这个功能完美，但受限于支持CSS3的浏览器。我在IE8中试过，它不能正常工作。看起来我的选择将是透明的图像。 – Andy

Div样式继承问题

回答

相关问题