14

我正在尝试使透明 div 中的文本没有不透明度，也就是完全黑色：

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

这可能只与CSS有关吗？

提前致谢

4

3 回答 3

13

最简单的方法是使用 opacity/alpha 设置父 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-03T17:29:01.930 回答
3

子元素继承不透明度。您可以做的是<p>将不透明 div 的外部定位并设置负边距以将其移动到上面。

我经常遇到这个问题，通常是这样解决的。只有当您拥有动态内容并且 div 必须扩展时，才会出现问题。

于 2010-03-03T17:21:29.823 回答
1

背景是否由纯色组成？如果是这样，您还可以使用 RGBa 为其子级选择div不继承的透明背景颜色。阅读RGBa 浏览器支持以获取更多信息、IE 的解决方法和另一种解决方案。

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

于 2010-03-03T17:31:13.063 回答