CSS

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; }

问题是filter:aplha。此过滤器与背景一起使用，也与消息框一起使用。我不会将此过滤器用于消息框，仅用于背景。

我该怎么做？

谢谢。

Answer 1

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

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

jsBin demo

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

CSS - filter: alpha only for parent, not for children

alpha

filter