基础 CSS 顶栏不透明度答案

【问题标题】：Foundation CSS Top-bar opacity基础 CSS 顶栏不透明度
【发布时间】：2014-01-31 05:22:45
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

.top-bar {
      opacity: 0.3;
}

根据需要设置不透明度值，它是一个小于 1 且大于或等于 0 的值

【讨论】：

这就是我最初的想法，但它并没有产生我想要的结果。看我把页面背景设置为图片，使用不透明度0.3只会降低颜色，但是背景还在下面，看不到。
尝试为不透明度使用其他值。
这些设置仅在使用不同设置时将背景从深黑色变为白色。
检查以下链接中的 CSS 不透明度定义，以了解此属性为元素提供了什么。 developer.mozilla.org/en-US/docs/Web/CSS/opacity

【解决方案2】：

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

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

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

【讨论】：