html - 固定导航根据背景改变不透明度

Question

http://www.kieran-smith.co.uk/

你好，

希望我能够正确解释这一点。在上面的网站上，您应该会看到一个带有浅灰色背景的固定导航。如果您滚动背景不透明度似乎会发生变化，但我不确定为什么，每个背景图像的不透明度都是 0.7，但是这是在单独的 div 中设置的，而不是在导航中。

https://jsfiddle.net/2aLwazks/

.kimg1, .kimg2, .kimg3 {
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
}

.kimg1 {
    background-image:url("http://www.kieran-smith.co.uk/img/image1.png");
    min-height:100%;
}

.top-menu {
position:fixed;
top:0;
background:#dddddd;
color:#444444;
width:100%;
padding:10px;
}

Answer 1

根据这个问题，我认为您希望导航不改变颜色，因此要解决这个问题，只需添加 z-index: 10;到 .top-menu，所以它看起来像这样

.top-menu {
position:fixed;
top:0;
background:#dddddd;
color:#444444;
width:100%;
padding:10px;
z-index: 10;