Zurb Foundation：半透明のトップバーが可能ですか？

Question

Zurb Foundationで半透明のトップバーを使用する方法はありますか？

私は _settings.scssファイルで、私が言うことができるものから、関連するすべての変数を、定義した

：

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

そして、（0-0.5からアルファ値でRGBA年代の）バリエーションのすべての数を試してみましたし、持っていますドロップダウン/ボタンが背景を上に積み重ねることで、より暗く/より不透明に見える、完全に透明なバーまたは半透明のバーで終わる。

全体に半透明である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コードに数行追加しました。

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