Question

我开始涉足Modals和我用于叠加层的CSS，但似乎并不想工作。任何想法可能会发生什么？

用SCSS编写

@mixin transitionSupport($transition){
    -webkit-transition: $transition;
       -moz-transition: $transition;
         -o-transition: $transition;
            transition: $transition;
}

.modal-overlay{
    position: fixed;
    z-index: 998;
    top: 0;
    left: 0;

    opacity: 0;

    width: 100%;
    height: 100%;

    @include transitionSupport(1ms opacity ease);

    background: rgb(0,0,0);

    .modal-open{
        opacity: 1;
    }
}

HTML：

<div class="modal-overlay modal-open">
</div>

Link to the codepen

当我查看页面本身时，页面保持白色。我不明白为什么。

.modal-open {opacity：1}是否应该覆盖.modal-overlay？

Answer 1

将.modal-open {更改为&.modal-open {以匹配class="modal-overlay modal-open"。

目前正在编写，它正在寻找匹配名为.modal-open INSIDE .modal-overlay的元素。

CSS Overlay无法显示

1 个答案: