Zurb基金会：半透明顶吧可能吗？

Question

有没有办法让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）并且总是最终得到一个完全透明的条形或半透明条形，其中下拉/按钮将它们的背景堆叠在顶部，从而看起来更黑/更不透明。

有没有办法让topbar在整个过程中都是半透明的？

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

Answer 1

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

其他步骤是：

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

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

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

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;