我在一个对调色板要求很高的网站上工作。某些页面内容需要不透明度为 0.8 的背景色。
我的导航栏使用了 Bootstrap 的 affix top,所以它在滚动时出现。我已将导航栏背景色指定为白色,因此它始终可读。
任何没有不透明度的内容看起来都很完美。导航栏的背景色覆盖了需要隐藏的内容。
不透明度为 0.8 的内容会导致问题。它位于整个导航栏的顶部,唯一能看到导航栏的方法是不透明。
假设有两张纸,您将一张纸滑到另一张纸上。如果没有不透明度,导航栏页面将位于顶部。设置不透明度后,导航栏页面位于下方。
有什么办法可以解决这个问题吗?
这是我正在做的事情的简化代码。
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>
最佳答案
嗯。
在完成设计的其他部分后,我的测试浏览器中不再出现此问题。
关于html - 页面上的 Bootstrap Affix 和不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18853385/