css overlay with a div without overlay

Question

我有一个带有用于覆盖的 css 类的面板，其中包含一个不应该透明的 div

<asp:panel id="panelOverlay" runat="server" class="Overlay" visible="false">
        <asp:panel id="panelPopUpPanel" runat="server" class="PopUpPanel" visible="false">
            <asp:panel id="panelPopUpTitle" runat="server" style="width: 100%; height: 20px; text-align: right; ">
                <asp:imagebutton id="cmdClosePopUp" runat="server" imageurl="~/pict/graphics/delete.png"></asp:imagebutton>
            </asp:panel>
        <div class="noOverlay">
            <h4>This is the PopUp Window</h4>
            <asp:Label runat="server" ID="codice"></asp:Label>
        </div>                               
        <div>&nbsp;</div>
        </asp:panel>
    </asp:panel>

我有这个CSS类

.Overlay { 
          position:fixed; 
          top:0px; 
          bottom:0px; 
          left:0px; 
          right:0px; 
          overflow:hidden; 
          padding:0; 
          margin:0; 
          background-color:#000;  
          filter:alpha(opacity=50); 
          opacity:0.5; 
          z-index:1000;
        }

    .noOverlay { 
      background-color:#ffffff;  
      filter:alpha(opacity=100); 
      opacity:1; 
    }

我无法设置 .noOverlay CSS 使其工作谢谢

Answer 1

.noOverlay 不是透明的，但它的父容器导致 .noOverlay 看起来好像也是透明的。

改用 rgba，它允许您仅为该特定元素设置背景颜色和背景透明度:

body {background:green}

.demoBox {
  background: #000;
  padding: 20px;
}
.Overlay {
  /* The last argument is the transparency from 0 to 1 */
  background: rgba(0, 0, 0, .5);
  color:#fff;
}
.noOverlay {
  background: rgba(255, 255, 255, 1);
  color:#000;
}

<div class="demoBox Overlay">
  I am a transparent div

  <div class="demoBox noOverlay">I am not a transparent div</div>
</div>

正如您将在此处看到的，.noOverlay 包含在 .Overlay div 中，但是，只有 .Overlay 是透明的.