我想讓navbar透明有點像this。但我似乎無法讓它工作。我在navbar類中添加了rga(0,0,0,0.5)。Bootstrap透明導航條
8
A
回答
13
我只是想通了。對於任何未來需要此功能的人。我添加了一個CSS覆蓋以:
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
}
而且我的HTML語法如下:
<div class="navbar transparent navbar-inverse navbar-fixed-top">
<nav class="navbar-inner">
...
</div>
</div>
3
首先,我認爲你有錯誤的語法爲RGB或RGBA你寫
rga(0,0,0,0.5)
實際上它應該是
rgba(0,0,0,0.5);
讓我們以此爲例:
HTML
<div class="navbar">
<ul>
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>
CSS
.navbar {
background: rgba(0,0,0,0.5);
}
我也建議有一個後備的顏色,以防瀏覽器的人使用是不支持它。
CSS後備
.navbar {
background: rgb (0,0,0);
}
6
你甚至可以使用這樣
.navbar-default {
background: none;
}
或
.navbar {
background: none;
}
你會得到透明背景。
1
對於透明的導航欄來說,這非常簡單。在CSS文檔中,您可以執行以下三件事之一。答:簡單的方法,但你不用這種方法學得太多。您可以從字面上輸入導航欄背景透明的CSS文檔。相當簡單:
.navbar
{
background-color: transparent;
}
B.可以間接設置爲RGBA背景顏色的東西alpha通道中的R,G,和B 0和1之間協調控制紅色,綠色和藍色像素。 A或alpha通道控制不透明度/透明度。對於R,G和B,您可以輸入介於0和255之間的值。但是,對於A alpha通道,您必須輸入介於0和1之間的值。1表示它完全不透明(不透明,又名完全可見),0表示它完全透明(不可見)。爲alpha通道設置不同的值可以幫助您確定您希望導航欄的透明度。如果您將導航欄設爲固定頂部導航欄,並且在整個網頁中使用不同的背景顏色,則非常有用。
哦,談到顏色......還有更多。
您可以更進一步。如果您希望導航欄透明並具有淺色/白色色調,則可以執行以下操作。
.navbar
{
/* White tint with 0.5 opacity. */
background-color: rgba(255,255,255,0.5);
/* Notice how RGB of 255,255,255 is white. */
}
或者,如果你希望你的導航欄是透明的具深色的,黑的色調,你可以做到以下幾點:
.navbar
{
/* Example with a black tint and 0.5 opacity. */
background-color: rgba(0,0,0,0.5);
/* RGB of 0,0,0 is black. */
}
現在,如果你想給你的透明導航欄,例如,一個綠色的色調,亂七八糟的綠色價值!對於紅色,請使用R值。對於藍色,請使用B值。對於#008f00的RGB十六進制綠色,或(0,143,0),這將是這樣的:
.navbar
{
/* Green tint of RGB 0,143,0, and with 0.5 opacity. */
background-color: rgba(0,143,0,0.5);
}
希望這有助於!
相關問題
- 1. Bootstrap導航透明
- 2. Bootstrap透明導航欄不工作
- 3. 導航條帶透明箭頭指針
- 4. 透明導航欄
- 5. 導航欄沒有透明
- 6. 透明導航軟按鈕
- 7. 透明導航欄(swift 3)
- 8. ios 11透明導航欄
- 9. 導航欄透明問題
- 10. 推後導航欄透明
- 11. 透明導航欄後備
- 12. 半透明導航欄
- 13. 透明菜單/導航欄
- 14. Bootstrap導航條太長
- 15. 如何使Bootstrap導航欄在滾動時不透明而不透明時不透明?
- 16. Bootstrap 3.0導航欄變成透明或白色
- 17. 使Bootstrap 3導航欄透明,與主題
- 18. 將Twitter Bootstrap股票導航欄更改爲透明
- 19. Bootstrap移動導航欄下拉菜單是透明的
- 20. 設置爲半透明時,導航欄變爲透明
- 21. 透明導航條下的自定義背景
- 22. 我可以在故事板中設置透明導航條嗎?
- 23. 滾動條採用了半透明導航欄
- 24. 透明導航欄迅速的iOS
- 25. 導航背景透明度問題
- 26. Xamarin iOS導航欄100%透明
- 27. 如何使導航欄透明
- 28. 導航時的透明視圖
- 29. 如何使導航欄透明
- 30. 半透明導航欄是純色
我想你的語法是'rga(0,0,0,0.5)'?我相信它應該是'rgba(0,0,0,0.5)'。 – lozadaOmr 2013-12-14 04:36:54