嵌套 <nav> 上未显示背景图片

Question

我有一个 <header>，它有一个嵌套的 <div> 和 <nav>。我使用 background-image: url(); 在 css 中设置了背景图像，它在 <header> 和 <div> 上显示正常，但在 <nav> 上显示不正常。它似乎在 <nav> 具有设定高度时有效，但在其他情况下无效。奇怪的是 header 也没有设置高度，但是图像在那里显示正常。

我认为问题是 <nav> 包含浮动元素并且应用了 clearfix 但 <header> 没有，但我不知道如何解决这个问题和 google 没有帮助。

这是一个 codepen 的问题（我使用 scss 预处理器 fyi 但如果你不喜欢的话，codepen 允许你看到编译）。

如有任何帮助，我们将不胜感激！

Answer 1

您应该将 :before class 更改为 :after

nav {
    //clearfix
    &:after {
        content: "";
        display: table;
        clear: both;
    }

希望能帮到你。

嵌套 <nav> 上未显示背景图片

background image not showing on nested <nav>

html

css

background-image

clearfix