Question

我正在尝试让我的网站在ie8上工作，我最初的工作是background-color:rgba(4, 4, 4, 0.8); - 这在其他浏览器上工作正常，不幸的是ie8不适用于此，所以我使用下面的CSS代替。 - 有没有人知道如何避免子元素从父级继承不透明度？

提前多多感谢。

我做了一个小提琴但是当我在ie8 http://jsfiddle.net/up3uusxf/2/

中打开它时似乎崩溃了

 <div id="overlay-modal">
      <div class="inner-modal">
        <p>Content in here</p>
      </div>
    </div> 

#overlay-modal
            {
                display:none;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background-color:black;
                filter: alpha(opacity=80);
                        opacity: 0.8; 
                z-index:999;
            }
            .inner-modal
            {
                width: 400px;
                /*height: 270px;*/
                margin: 200px auto;
                background-color: white;
            }

Answer 1

您需要将您的叠加层设置为自己的容器，并在其外部使用其内容。

jsfiddle example here

<强> HTML

<div id="overlay-modal">
    <div class="inner-modal">
        <p>Content in here</p>
    </div>
    <div class="justTransparentMask"></div>
</div>

<强> CSS

#overlay-modal {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    z-index:999;
}
.inner-modal {
    width: 400px;
    /*height: 270px;*/
    margin: 200px auto;
    background-color: white;
}
.justTransparentMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    filter: alpha(opacity=80);
            opacity: 0.8; 
}

为什么这个模态的透明背景只在ie8中由子元素继承？

1 个答案: