Question

我有一个奇怪的人。我在我的网站上使用相同的代码，它可以在任何地方使用。出于某种原因，它根本不会在这里工作。

基本上我正在做的是通过使用伪元素:before和:after来创建半透明背景图像，以使用背景颜色（:before）和半透明填充整个容器图像（:after）。 :before元素工作正常，它按预期填充.dashboard-page的高度和宽度。 :after元素的宽度为100％，但高度为0，因此图像不会显示。非常感谢帮助。

.dashboard-page {
    width: 100%;
    position: relative;
    z-index: 1;
    @include clearfix;

    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        @include transition($transition-main);
    }

    &:before {
        z-index: -2;                    
        background-color: $blue-light;
    }

    &:after {
        opacity: 0.02;
        z-index: -1;    
        background-image: url('../life/assets/img/pattern.png');                
    }
}

Answer 1

尝试将display: block;添加到:after。

默认情况下，伪元素是内联框

伪元素::之后没有高度

1 个答案: