logo标签列表

伪元素::after没有高度。

csssass
4
我有一个奇怪的问题。我在网站上各处都使用这段代码，而且它在所有地方都有效。但是出现在此处时，它却无法工作。
基本上，我的做法是通过使用伪元素 :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');                
    }
}
尝试将 content: '' 更改为带有空格的 content: ' '。 - Novocaine
你有这个的演示吗？ - cimmanon
2
似乎你的clearfix可能会覆盖其他CSS。 - derek_duncan
没有更多的代码，这是无法重现的。http://jsfiddle.net/yeykmwxx/2/. 必须想知道为什么你要使用伪元素来实现这个，而不是使用多个背景：http://css-tricks.com/tinted-images-multiple-backgrounds/。 - cimmanon
Cimmanon - 我使用伪元素而不是多个背景，因为背景图像本身需要半透明，而颜色需要完全不透明。我还在网站上使用多种不同颜色的相同模式，因此我选择使用伪元素，而不是调用多个背景图像，这样我就可以调整背景图像的不透明度。 - user2855168
1个回答
10

尝试在 :after 中添加 display: block;。

默认情况下，伪元素是内联盒子。

1
显示块固定了它，尽管我在网站的其他地方都没有使用过这个。最奇怪的事情。感谢您的帮助，@derek_duncan。 - user2855168
很高兴我们能够解决它 @idealbrandon - derek_duncan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接