div的背景不会改变透明度

我有一个div'floater_EditData_Panel_popup'，其中包含updatepanel，占位符和更多的div。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>

产生如下：

enter image description here

请指教

来源

2014-10-07 John

首先，避免使用'opacity'用于这一目的。最好使用'rgba（）'背景色。其次，''.floaterDiv'周围可能会有另一个包装元素具有白色背景色。如果有的话，删除它的背景颜色。 – 2014-10-07 11:34:30

尝试将背景改为黑色而不是白色'background-color：rgba（0,0,0,0.5）;' – Benjamin 2014-10-07 11:34:33

@HashemQolami感谢回复iv尝试rgba但没有效果。 – John 2014-10-07 11:38:48

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和检查元素风格

来源

2014-10-07 11:36:25

对不起，我忘了从文本中删除它，已将其从代码中删除，但没有区别 – John 2014-10-07 11:37:57

您是否还删除了所有不透明的东西？ – 2014-10-07 11:40:12

添加！重要推翻其他陈述 – 2014-10-07 11:47:52

尝试删除

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

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

你也应该改变RGBA值

rgba(255,255,255,0.3);

对于白色半透明背景

来源

2014-10-07 11:47:42

div的背景不会改变透明度

回答

相关问题