Foundation CSS顶栏不透明度

Question

我正在使用Zurb的Foundation 5创建一个页面，我想让顶栏有点透明。知道如何通过css或jquery实现这一目标吗？任何代码示例都表示赞赏。谢谢。

Answer 1

请确保您在html中的基础css文件之后链接了app.css，然后将以下代码添加到app.css中：

.top-bar {
      opacity: 0.3;
}

根据需要设置不透明度值，其值小于1且大于或等于0

Answer 2

我遇到了同样的问题，并认为我会发布我的解决方案。检查我的css文件是否已正确关联且.top-bar不透明度是直接设置还是使用rgba值（例如rgba(0,0,255,0.5)）后，顶栏仍然不透明。

我的问题是顶栏被包裹在一个背景设置为不透明颜色的元素中！删除它解决了这个问题。

如果你没有和我犯同样的错误，它也可能与topbar下拉背景颜色有关 - 使用基础Sass变量解释here。