div的背景不会改变透明度

Question

我有一个div'floater_EditData_Panel_popup'，其中包含updatepanel，占位符和更多div。

我想提高外部div'floater_EditData_Panel_popup'的透明度，以便用户只能稍微看一下背景。

到目前为止，div的背景颜色仍为白色，而文本框则褪色

.floaterDiv{
  top: 0%;
  left: 0%;
  height: 450px;  
  width: 800px; 
  border: solid 1px blue; 
  /*background-color:white;*/
  background-color:rgba(255,0,0,0.5);
  margin:1; 
  text-align:left; 
  outline-style: none;
  display:none;
  overflow:hidden;
  zoom: 1;
  filter: alpha(opacity=40);
  opacity: 0.4;
  z-index:999999999999;
  /* background-blend-mode: multiply;*/
}



<div id="floater_EditData_Panel_popup" title="Feature Information" class="floaterDiv"> 
    <p1>Select a feature to view/edit feature information.</p1>
   <br />
   <br />
   <br />
      <asp:UpdatePanel runat="server" id="UpdatePanelDetails1" updatemode="Conditional" Childrenastriggers="true">
        <ContentTemplate>
          <asp:PlaceHolder ID="PlaceHolder1" runat="server" >
          </asp:PlaceHolder>
          <br />
          <br />
          <div id="EditDataPanelMessageOutput" style="color:Red;">

         </div>
          <div id="FeatureMeasureOutput"></div>
          <br />
          <br />
          <div class="buttonwrap">
            <div id="Span2" class="ActionBtns" style="display: inline-block;" >
              <asp:button runat="server" id="UpdateButton" value="Save" Text="Save" OnClientClick="ValidateEditData();" CausesValidation="true" ValidationGroup="g_currentSelectedLayerName" />
            </div>
          </div>
          <asp:ValidationSummary runat="server" ID="valSummary1" HeaderText="You must enter a value in the following fields:" DisplayMode="BulletList" EnableClientScript="true" ShowSummary="true" Enabled="true" />

        </ContentTemplate>

      </asp:UpdatePanel>
    </div>

产生以下内容：

请告知

Answer 1

尝试删除

filter: alpha(opacity=40);
opacity: 0.4;

这会影响DIV的内容，而不是背景本身。

您还应将RGBA值更改为

rgba(255,255,255,0.3);

白色半透明背景

Answer 2

  top: 0%;
  left: 0%;
  height: 450px;  
  width: 800px; 
  border: solid 1px blue; 
  background-color:rgba(255,255,255,0.5) !important;
  /* overrule other css statements */
  margin:1; 
  text-align:left; 
  outline-style: none;
  display:none;
  overflow:hidden;
  zoom: 1;
  z-index:999999999999;

如果这不起作用，您应该检查另一个CSS语句是否正在将背景更改为白色或#FFF。检查chrome并检查元素的样式