Zurb Foundation:半透明顶杆可能吗? [英] Zurb Foundation: Semi transparent top bar possible?

问题描述

有没有办法用 Zurb Foundation 制作半透明顶栏?

Is there any way to have a semi-transparent top bar with Zurb Foundation?

我已经在我的 _settings.scss 文件中定义了所有相关变量:

I have defined all the relevant variables, from what I can tell, in my _settings.scss file:

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

并尝试了所有变体(rgba 的 alpha 值从 0 到 0.5)，并且总是以完全透明的条形或半透明条形结束，下拉菜单/按钮将其背景堆叠在顶部，因此显得更暗/更不透明.

And have tried all number of variations (of rgba's with alpha values from 0-0.5) and have always ended up with either a fully transparent bar or a semi-transparent bar with the dropdowns/buttons stacking their background on top and thus appearing darker/more opaque.

有没有什么办法可以让顶栏整个半透明?

Is there any way to have a topbar that is semi-transparent throughout?

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

I can see in the stylesheet that .top-bar-section li a:not(.button) is always getting a background colour. I know I could manually override this in my own stylesheet, but I feel like there must be a way to setup the variables so these buttons don't appear darker?

推荐答案

试试这个.

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

这篇关于Zurb Foundation:半透明顶杆可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！