javascript - 添加负像素时获得透明度

Question

当我添加负像素以将主菜单推到图像上时，我的主导航变成透明。我不知道为什么。似乎任何悬停在图像上的东西都变得半透明了。你可以在这里看到它

http://dev.trafficdigitalagency.com/obryan/

我该去哪里编辑呢？

.nav-bar {
    height: 40px;
    margin-top: -100px;
    padding: 0;
    width: 56em;
    margin-left: 10%;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

它不是透明的。由于负 z-index，色带效果位于图像后面:

.ribbon:before, .ribbon:after {
    ...
    z-index: -1;
}

我还建议不要使用这样的最高负边距。它肯定会在某些设备上中断。最好在菜单上放置一个较大的填充区域，并将顶部图像放在背景中以获得更可靠的结果。