使用CSS覆盖透明div中的不透明文本 [英] Override opaque text in a transparent div with CSS

问题描述

我想让文字内部透明的div没有不透明度，也就是完全黑色：

 < div style =不透明度：0.6;背景：＃3cc;> 
< p style =background：＃000; opacity：1>此文字应为全黑»< / p> 
< / div> 
  

这是否只能使用CSS？

提前感谢

解决方案

最简单的方法是使用opacity / alpha设置父div的背景：

  div {
 background：#fff; / *对于不理解以下rgba规则的浏览器* / 
 background-color：rgba（255,255,255,0.5）; / * rgb，white，alpha为0.5 * / 
} 
  

$ b

对于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

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

解决方案

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.

这篇关于使用CSS覆盖透明div中的不透明文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！