使用 CSS 覆盖透明 div 中的不透明文本

发布于 2024-08-23 11:34:23 字数 248 浏览 4 评论 0 原文

我试图使透明 div 内的文本没有不透明度，也就是完全黑色：

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

这可能仅与 CSS 相关吗？

提前致谢

原文

I am trying to make text inside a transparent div have no opacity, aka be completely black:

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

Is this possible to do with only CSS?

Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗梦空间 2024-08-30 11:34:24

最简单的方法是使用 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 7 有一个专有的过滤器选项，但恐怕我不记得它是如何工作的。所以我省略了任何描述/展示它的尝试。如果我能找到有用的参考，我会在稍后添加它。

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

The easiest way is to style the background of the parent div with opacity/alpha:

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 */
}

This is not, however, compatible with IE.

For IE >= 7 compatibility, you could use:

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

I recall that IE < 7 has a proprietary filter option, but I'm afraid I can't recall how it works. So I've omitted any attempt to describe/show it. If I can find a useful reference though I'll add it in later.

As noted by easwee the opacity is inherited by contained elements, which is why you can't override it, and is why I prefer to use the background-color/background-image approach.