3

我从网页设计师布局中得到，其中包含（探针）：

<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 不透明？

4

3 回答 3

2

使用半透明的 .png 作为背景图片：

CSS：

background: transparent url(/url/image.png) top left repeat;
于 2010-01-05T11:18:34.657 回答
2

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

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

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

IE6 会优雅地降级：

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

在 IE6 上也有简单的 png 透明度选项。由你决定。

如果您opacity的代码有很多实例，并且不想在* html任何地方弄乱您的代码，您可以使用条件注释。

于 2010-01-05T12:16:36.617 回答
-2

添加： 

#subMenuRowHTML {
filter:none;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}

于 2010-01-05T11:18:30.250 回答