css - 在 div 中更改 div 的不透明度 - 这可能吗？如何？

Question

我从 web designer layout 中得到，其中包含(probe):

<div id="subMenuRow">
 <div id="subMenuRowHTML">
  <a href="/link">Link</a>
 </div>
</div>

和相应的 css:

#subMenuRow{
        width: 900px;
        height: 40px;
        background: #000000;
        float: left;
        clear: both;
        filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
}

Opacity 用于为 html 菜单制作透明栏。问题是，每个包含链接的文本也包含透明度，这是非常不必要的。如何避免 subMenuRowHTML 不透明？

Answer 1

首先，您不再需要使用 -moz-opacity 和 -khtml-opacity。他们都非常非常老了。

目前还没有完全支持的解决方案。 CSS3 RGBA 在现代浏览器中解决了这个问题，但如果您需要支持旧浏览器，则需要使用半透明 png:

#subMenuRow { background: url(semi-trans.png); }

IE6 将优雅地降级:

* html #subMenuRow { background: url(full-opacity.gif); }

还有easy options用于 IE6 上的 png 透明度。这取决于你。

如果您的代码中有许多 opacity 实例，并且不想让 * html 弄乱您的代码，您可以使用条件注释。