Zurb Foundation：半透明顶栏可能吗？答案

【问题标题】：Zurb Foundation: Semi transparent top bar possible?Zurb Foundation：半透明顶栏可能吗？
【发布时间】：2014-01-08 06:47:41
【问题描述】：

Zurb Foundation 有没有办法让顶栏变成半透明？

据我所知，我已经在_settings.scss 文件中定义了所有相关变量：

$topbar-bg-color
$topbar-bg
$topbar-dropdown-bg
$topbar-dropdown-link-bg
$topbar-dropdown-label-bg

并且已经尝试了所有数量的变化（rgba 的 alpha 值从 0-0.5）并且总是以完全透明条或半透明条结束，下拉/按钮将其背景堆叠在顶部，因此看起来更暗/更不透明。

有没有办法让顶部栏始终保持半透明？

我可以在样式表中看到.top-bar-section li a:not(.button) 总是获得背景颜色。我知道我可以在自己的样式表中手动覆盖它，但我觉得必须有一种方法来设置变量，这样这些按钮就不会显得更暗？

【问题讨论】：

如果涉及半透明覆盖，您所要求的内容是不可能的。使它们不“堆叠”的唯一方法是使叠加层完全透明。
我只是认为 Foundation 会提供一种方法来确保顶部栏中的按钮/链接本身可以变得透明，并让长条包装 nav.top-bar 显示出来

标签： sass zurb-foundation

【解决方案1】：

我尝试了以下代码，对我来说听起来不错。我在 Juni Brosas 代码中添加了几行代码。

header,div.contain-to-grid.sticky, nav.top-bar {
   
    background: none;}

    li.has-dropdown.a{background: none;}

.top-bar { background-color: transparent; }
.top-bar-section { background-color: transparent !important;  }
.top-bar-section li { background-color: transparent !important;  }
.top-bar-section li a { background-color: transparent !important;  }

【讨论】：

【解决方案2】：

试试这个。

.top-bar { background-color: transparent; }
.top-bar-section { background-color: transparent !important;  }
.top-bar-section li { background-color: transparent !important;  }
.top-bar-section li a { background-color: transparent !important;  }

【讨论】：

【解决方案3】：

屏幕截图右侧链接的背景由$topbar-dropdown-bg 变量设置。您需要将其更改为 none 或 transparent。

其他步骤是：

将背景颜色变量设置为none。
将$topbar-bg-color 设置为半透明值，例如rgba(#333,0.5)。

这是 demo。我试图评论我将背景设置为none的所有变量。

【讨论】：

通过编辑foundation_and_overrides scss，我已经能够让透明顶栏在全角或移动（小）宽度下看起来正确，但不能同时透明。尝试实现您的演示，但出现错误。我在 Rails 4 中。对此有任何经验或想法吗？我的导航非常基本，右侧有 2 个链接，左侧有一个链接，它们可以下拉并且工作得很好，只是在尝试使它们透明时却没有。感谢您的任何建议。 @布雷特
您不应编辑foundation.scss 文件。您可能需要编辑 settings.scss 文件来更改这些变量。我没有使用 Rails 版本的经验，所以在这方面我无法提供太多帮助。