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

我从网页设计师的布局，其中包含（探头）有：在div中更改div的不透明度 - 这可能吗？怎么样？

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

来源

2010-01-05 bluszcz

最后，我把HTML div放在外面，并设置了绝对位置。感谢球员的建议。 – bluszcz 2010-01-05 13:11:36

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

今天没有完全支持的解决方案。 CSS3 RGBA解决这一在现代浏览器，但如果你需要支持旧的浏览器，你将需要使用半透明PNG：

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

IE6将与此优雅降级：

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

也有easy options为png在IE6上的透明度。随你便。

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

来源

2010-01-05 12:16:36

谢谢，我会用png修复下一个项目。 – bluszcz 2010-01-05 13:12:16

-2

地址：

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

来源

2010-01-05 11:18:30

这不起作用，所有的不透明度设置将相对于父母的不透明度（=永远不会比父母透明度低）。 – 2010-01-05 11:19:44

啊，好点。 – 2010-01-05 11:20:17

使用半透明巴纽作为背景图像：

CSS：

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

来源

2010-01-05 11:18:34

我认为它带来了另一个复杂性 - 就像IE6的透明度？我已经在下面画了...... – bluszcz 2010-01-05 11:34:37

这是正确的！ IE6不处理透明PNG，因为它应该。你可以通过使用一个javascript类来处理它; http://homepage.ntlworld.com/bobosola/ – 2010-01-05 12:08:32

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

回答

相关问题