html - 如何获得带有不透明文本的半透明背景？

Question

我正在尝试这种方法，我只放了 2 个 div，我为第一个添加背景并使其半透明设置样式，然后为第一个设置样式使其不透明:

这是代码:

<div id="container">
    <div id="opaquetext">
      This is a normal text
      on a translucent background
    </div>
</div>

和 CSS:

   #container {
       background-color: #ffffff;  /* the background          */
       filter:alpha(opacity=50);   /* Internet Explorer       */
       -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
       opacity: 0.5;               /* newer Mozilla and CSS-3 */
    }
    #opaquetext {
       filter:alpha(opacity=100);  /* discarded */
       -moz-opacity:1.0;           /* discarded */
       opacity: 1.0;               /* discarded */
    }

我认为它会起作用，但出于某种原因，它也使文本变得透明。

Answer 1

不透明度样式会影响整个元素的显示 - 包括其背景色和前景色。样式也乘以元素树。换句话说，您的内部 div 只是被设计为具有外部 div 的 100% 不透明度。 50% 不透明度的 100% 表示它以与父元素相同的不透明度显示:50%。

有两种变通方法，它们都不需要两个 div，它们都允许您像往常一样为文本指定 color: #000000:

• 使用透明背景图片
  ^{IE7之前的IE不支持}

• 使用背景色:rgba(255, 255, 255, 0.5)
  ^{IE9之前不支持，火狐3.5之前不支持}