覆盖与CSS

透明的div不透明的文字我试图做一个透明的div内的文本没有透明度，又名全黑：覆盖与CSS

<div style="opacity:0.6;background:#3cc;"> 
    <p style="background:#000;opacity:1">This text should be all black</p> 
</div>

这是可能仅与CSS呢？

在此先感谢

来源

2010-03-03 mager

+1 JabbR带我到这里。 – 2013-08-27 15:20:02

子元素继承不透明度。你可以做的是将<p>定位在不透明div的外面，并设置一个负边距以将其移动。

我经常遇到这个问题，通常这样解决它。问题只有当你有动态内容和div必须扩大。

来源

2010-03-03 17:21:29 easwee

最简单的方法就是风格不透明度/阿尔法父div的背景：

div { 
    background: #fff; /* for browsers that don't understand the following rgba rule */ 
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */ 
}

这是没有，不过，与IE兼容。

对于IE> = 7的兼容性，可以使用：

div { 
    background-image: url('path/to/partially_transparent.png'); 
    background-position: 0 0; 
    background-repeat: repeat; 
}

我记得IE < 7有一个专有的过滤选项，但我怕我不记得它是如何工作的。所以我省略了描述/显示它的任何尝试。如果我可以找到一个有用的参考，但我会在稍后添加它。

正如easwee所指出的那样，不透明度是由包含的元素继承的，这就是为什么你不能覆盖它，这也是为什么我更喜欢使用background-color/background-image的方法。

来源

2010-03-03 17:29:01

总是声明没有RGBa的回退，就像我在我的回答中链接到的文章中所述。 – 2010-03-03 17:33:25

@Marcel Korpel，是的，你是对的（编辑后备）。 – 2010-03-03 17:34:42

@ ricebowl：不会，这会触发IE 6/7中的错误：http://css-tricks.com/ie-background-rgb-bug/ – 2010-03-03 17:37:22

背景是否由纯色组成？如果是这样，您还可以使用RGBa为div选择透明背景颜色，但不会由其子项继承。有关更多信息，请参阅RGBa Browser Support，适用于IE和another solution的解决方法。

如果div的背景不稳定，则可以使用透明PNG作为背景。请记住在IE6（和5.5）中使用AlphaImageLoader。

来源

2010-03-03 17:31:13

回答

相关问题