Question

我来自网页设计师布局，其中包含（探测）：

<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;
}

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

Answer 1

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

的CSS：

background: transparent url(/url/image.png) top left repeat;

Answer 2

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

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

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

IE6会优雅地降级：

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

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

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

Answer 3

添加：

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

在div中更改div的不透明度 - 这可能吗？怎么样？

3 个答案: