Html 引导粘贴和页面不透明度

我在一个网站上工作，有一个非常苛刻的颜色托盘。某些页面内容需要背景色，不透明度为0.8

我的导航栏使用引导的粘贴顶部，所以它在滚动时出现。我已将导航栏背景颜色指定为白色，因此它始终可读

任何没有不透明度的内容看起来都很完美。导航栏的背景色覆盖需要隐藏的内容

不透明度为0.8的内容会导致问题。它位于整个导航栏的顶部，查看导航栏的唯一方法是由于不透明度

想象两张纸，你把一张滑动到另一张上面。如果没有不透明度，导航栏页面将位于顶部。设置不透明度时，导航栏页面位于下方

有没有办法解决这个问题

这是我正在做的简化代码

CSS:

HTML:

...
...
...
...

Hmmm

在完成设计的其他部分后，我不再在测试浏览器中看到这个问题

body {
    background-color: white;
    position: relative;
}

div.nav-bar {
    background-color: white;
}

div.normal-content {
    background-color: gray;
}

div.special-content {
    background-color: red;
    opacity: 0.8;
}

<div data-spy="affix" data-offset-top="200" class="row nav-bar">
...
</div>

...


<div class="normal-content">
...
</div>
<div class="special-content">
...
</div>