Question

我正在尝试这种方法，我只是放了两个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：

使用透明背景图像
^IE在IE7
使用background-color: rgba(255, 255, 255, 0.5)
^{IE在IE9之前不支持这个，Firefox在3.5之前不支持这个}

Answer 2

使用rgba（）而不是＃...或rgb（）指定背景，其中rgba中的最后一个参数表示背景的不透明度。不透明度用于定义整个元素的不透明度。例如：

background: rgba(255, 0, 0, 0.2)

有关此内容的更多信息：http://www.css3.info/preview/rgba/

但它可能会引发旧浏览器的兼容性问题，即。如果您想支持旧浏览器，您应该考虑使用boltclock的答案中指定的透明背景图像。

Answer 3

不透明度继承是所有浏览器的标准行为。如果您希望子视图在不透明度上被继承，您有两种选择：

在＃opaquetext的样式中使用绝对位置：

#opaquetext {
    position: absolute;
    top: 10px;
    left: 10px;
    filter:alpha(opacity=100);  /* worked */
    -moz-opacity:1.0;           /* worked */
    opacity: 1.0;               /* worked */
}

使用照片/图像软件制作具有所需不透明度的背景，并在css中删除不透明度设置。

参考：

如何使用不透明文本获得半透明背景？

3 个答案: