日期:2014-05-17  浏览次数:20556 次

让CSS 不继承父控件的透明度
<asp:Panel ID="Panel1" runat="server" Visible="False" class="black_overlay">
  <div class="white_content">
  <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
  </div>
</asp:Panel>


为了简单,在C#的后台代码,直接让Panel1.visible=true,就显示出这个弹出层,此时black_overlay(背景黑色)有一定的透明度。但想white_content(白色内容),不要有透明度,由于CSS继承,默认会有black_overlay的透明度属性。我上网搜,要明确指定,就不会继承了。但我的white_content里已经

-moz-opacity: 1; opacity: 1.0; filter: alpha(opacity=100);

三种方法都用了,但仍然是透明的。

还有种笨办法是再用个控件,让div不成为panel的子控件,但我不想再浪费一个控件了,有没有什么办法?

------解决方案--------------------
当父容器设置了透明度的时候,子容器会继承父容器的性质,面对这个问题我们也不知道该说是bug还是说是大家对透明的理解方式问题。先不管css的标准认为怎样才是最合理的,当我们遇到不想要子容器也透明的时候如何去解决这样的问题。
方法一:
针对IE,在子容器添加:
position:relative;
针对firefox等就只能使用png
background:url(images/boxBg.png);
/*以下只有ie识别*/
*background:#CCCCCC;
方法二:
简单描述一下,也是网上常见的方法。
构造三个容器
首先,让需要透明的容器和不透明容器保持兄弟关系。
然后,通过父容器控制大小让两个兄弟容器通过定位保持一个看似父子的排列方式。
方法二是规避了透明度的继承问题,并不是解决了透明度继承问题