Question

我正在尝试在html / css中创建一个警告消息框。

这是我的代码：

        <div class="dim" id="msg">
            <div class="dialog_wrapper">
                <div class="dialog" id="msg_value"></div>
            </div>
        </div>

CSS：

.dim
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    display: none;
    top:0;
    z-index:1 !important;
    background-color:black;
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75;      /* khtml, old safari */
    -moz-opacity: 0.75;       /* mozilla, netscape */
    opacity: 0.75;           /* fx, safari, opera */
}

.dialog_wrapper { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); width: 100%; top: 40%; left: 0px; position: absolute; z-index: 5; display: block;  }
.dialog { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); width: 400px; height: 10%; margin: 0 auto; padding: 40px; background-color: #fff; border: 1px solid #ccc; color: #333; }

问题是过滤器：aplha。此过滤器使用背景和消息框。我不会将此过滤器用于消息框，仅用于背景。

我怎么做？

感谢。

Answer 1

只需将rgba背景颜色设置为.dim

即可

background: rgba(0, 0, 0, 0.75);

<强> jsBin demo

CSS - 过滤器：alpha仅适用于父级，不适用于儿童

1 个答案: