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

Posted 2023-03-06

【中文标题】背景颜色的不透明度，但不是文本[重复]

【英文标题】：Opacity of background-color, but not the text [duplicate]

【发布时间】：2010-10-12 21:10:05

【问题描述】：

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

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

【参考方案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？）。在这里解释：***.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://***.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;