页面上的Bootstrap词缀和不透明度

Question

I'm working on a site that has a very demanding color pallette. Some of the page content requires a background-color that need opacity 0.8.

My navigation bar uses Bootstrap's affix top, so it is present during scrolling. I have assigned the nav bar background-color white, so it is always readable.

Any content that doesn't have an opacity looks perfect. The nav-bar's background-color goes over the content that needs to be hidden.

The content with opacity 0.8 causes a problem. It goes on top of the entire nav bar, and the only way to see the nav bar is due to the opacity.

Imagine two pieces of paper, and you slide one over the other. Without opacity, the nav bar page goes on top. When opacity is set, the nav bar page goes underneath.

Any ideas how I can fix this?

Here's simplified code of what I'm doing.

CSS:

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;
}

HTML:

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

...


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

Answer 1

Hmmm.

After working on other parts of my design, I'm no longer seeing this problem in my test browsers.