html - 带背景图片的标题导航

Question

我正在尝试创建一个应该如下所示的标题 + 导航:

但是，我发现完成任务有些困难。到目前为止，我所做的是为页眉设置坚实的背景。然后，添加带有::before 和::after 元素(也带有背景图片)的锯齿状(编织相似的东西)，到目前为止它看起来很棒，除了当我将鼠标悬停在一个元素上时， :before 和 :after 元素不要使用与悬停元素相同的颜色(如图中的示例)着色。

我的方法是正确的还是我遗漏了什么？我也考虑过在整个标题的顶部创建一个 Overlay Div，但是问题会出现在不同的分辨率上，而且我不认为这可以解决原始问题，悬停时颜色不同。

你们有什么想法可以提供帮助，或者我没有在网上找到的 Material 吗？

这是我的代码:https://jsfiddle.net/nbrLck99/1/

.main-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    background-image: url('../images/desktop-header-background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 10px;
    display: block;
    width: 100%;
}

编辑:设法在 jsfiddle 中上传和调整图像。

Answer 1

这行不通。

您的 :after 元素是背景图像。这意味着它不受 background-color 属性的影响。您必须为每个菜单项创建一个 :after 元素，然后使用 :hover 选择器更改它的背景图像。您需要一张图片作为默认背景，一张图片作为悬停背景。如果您希望有不同的“波浪”，您可以为每个选项卡创建一个图像。

快速预览:

.main-nav {
    position: relative;
}
/* magic starts */
.level_1 > li > a::after {
    content: '';
    position: absolute;
    top: 100%;
    background-image: url('https://i.imgsafe.org/a58a017b5d.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 10px;
    display: block;
    width: 100%;
}
.level_1 > li:hover > a::after {
    background-image: url('http://i.imgsafe.org/a5f53cc8bf.png');
    z-index: 10;
}
/* magic ends */

.main-nav .level_1 {
    margin: 0;
    display: inline-block;
    background-color: #0E5780;
    width: 100%;
    position: relative;
}

.main-nav .level_1 li {
    position: relative;
}

.main-nav .level_1 li:hover {
    background-color: #f00;
}

.main-nav .level_1 > li {
    display: block;
    float: left;
    padding-top: 15px;
    padding-bottom: 15px;

}

.main-nav .level_1 li a {
    display: block;
    padding: 10px;
}

.main-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 15px;
    background-color: #0f0;
}

.main-nav .level_1 > li:hover ul {
    display: block;
}

<div class="container">
        <nav class="main-nav">
            <ul class="level_1">
                <li class="dropdown">
                    <a href="#">home</a>
                    <ul class="level_2">
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                    </ul>
                </li>
                <li><a href="#">about</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
            </ul>
        </nav>
    </div>