背景颜色的不透明度，但不是文本[重复]答案

【问题标题】：Opacity of background-color, but not the text [duplicate]背景颜色的不透明度，但不是文本[重复]
【发布时间】：2010-10-12 21:10:05
【问题描述】：

如何使 div 的背景在文本保持不透明的情况下跨浏览器（包括 Internet Explorer 6）透明？

我需要在不使用任何库（如 jQuery 等）的情况下完成此操作。（但如果您知道有一个库可以做到这一点，我很想知道，这样我就可以查看他们的代码）。

【问题讨论】：

标签： css opacity

【解决方案1】：

使用 rgba！

.alpha60 {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

除此之外，您必须为 IE 网络浏览器声明 background: transparent，最好通过条件 cmets 或类似方式提供服务！

通过http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

【讨论】：

IE9中的IE7模式是否有可能与实际的IE7不同？我问是因为这段代码在那里不起作用。但是如果我们只使用最后三个规则（没有background-color: rgb(0, 0, 0);） - 一切都很好
我尝试了这个解决方案，但它在 IE8 中不起作用，因为 IE8 正确应用了背景颜色。我刚刚取出了其他浏览器的后备（这是什么，旧版本的 firefox？）。在这里解释：stackoverflow.com/questions/4508191/… p.s. @Donotello ie9 中的 ie7 模式绝对不是 100% 准确的。我使用需要 IE7/8 的 CMS，而 IE9 中的兼容模式破坏了其中的各种内容。
链接的文章说，对于 IE（至少版本 8），您还需要有条件地设置 background:transparent。

【解决方案2】：

我为此使用了 alpha 透明的 PNG：

div.semi-transparent {
  background: url('semi-transparent.png');
}

不过，对于 IE6，您需要使用 PNG 修复程序（1、2）。

【讨论】：

纯 CSS > 背景图片
@MarcySutton IMO 并非总是如此，绝对不是。如果您查看标记为答案的答案，您就会明白为什么。我们应该浪费多少时间来实现跨浏览器兼容性。所以，当你绝对可以时，（当然，并非总是）你可以使用背景图像。就像我说的，JMO。
PNG 修复 1 太棒了！接受答案的方法在我的 IE6 上不起作用。
@Crungmungus 有许多 JS hacks/polyfills（请参阅答案中代码下方的链接），甚至还有一个 CSS method 来修复 IE6 中的 PNG 透明度。不过，在更复杂的用例中，它们往往会以某种方式破坏，因此几个月前我已经放弃了 IE6 PNG 透明度。

【解决方案3】：

我在我的博客Landman Code 上创建了这种效果。

我做的是

#Header {
  position: relative;
}
#Header H1 {
  font-size: 3em;
  color: #00FF00;
  margin:0;
  padding:0;
}
#Header H2 {
  font-size: 1.5em;
  color: #FFFF00;
  margin:0;
  padding:0;
}
#Header .Background {
  background: #557700;
  filter: alpha(opacity=30);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.3;
  zoom: 1;
}
#Header .Background * {
  visibility: hidden; // hide the faded text
}
#Header .Foreground {
  position: absolute; // position on top of the background div
  left: 0;
  top: 0;
}

<div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class="Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div>

重要的是每个填充/边距和内容在 .Background 和 .Foreground 中都必须相同。

【讨论】：

【解决方案4】：

放宽您在 IE6 和旧版浏览器上工作的要求，您可以使用 ::before 和 display: inline-block

div
{
  display: inline-block;
  position: relative;    
}
div::before
{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background:red;
  opacity: .2;
}

演示http://jsfiddle.net/KVyFH/172/

它适用于任何现代浏览器

【讨论】：

不能处理溢出。 jsfiddle.net/KVyFH/256
我建议也添加到 "before" 元素 "top: 0; right:0" 否则它不适用于填充

【解决方案5】：

感谢@davy-landmann 提供https://stackoverflow.com/a/638064/417153。这就是我要找的！与LESS代码相同的效果：

  @searchResultMinHeight = 200px;
  .searchResult {
    min-height: @searchResultMinHeight;

    position: relative;
    .innerTrans {
      background: white;
      .opacity(0.5);
      min-height: @searchResultMinHeight;
    }
    .innerBody {
      padding: 0.5em;
      position: absolute;
      top: 0;
    }
  }

【讨论】：