关于html：如何让Twitter Bootstrap Navbar 透明？

csshtmltwitter-bootstrap

How to make Twitter Bootstrap Navbar transparent?

我正在尝试使我的引导程序 navbar 透明。我正在使用引导程序 navbar-inverse 并尝试通过 rgba() 添加不透明度。我希望我的导航栏是透明的，如下图所示：

enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

@font-face {
font-family: FuturaBook;
src: url('fonts/FuturaStd-Light_1.otf');
}
body{
font-family: 'FuturaBook', Arial, sans-serif;
}

/***************************************************************************
Navigation Bar
****************************************************************************/

.navbar-inverse{
background-color: rgba(34, 34, 34, 0.5);
border-bottom: none;

}

.navbar-header{
width:100%;
height: 90px;

}
.navbar-header #brand{
font-family: 'FuturaBook', Arial, sans-serif;
color: white;
font-size: 20pt;
margin-top: 20px;
text-transform: uppercase;

}

.mynav li
{
list-style: none;
display: inline-block;
border-left: 1px solid white;
padding-top: 36px;
padding-left: 10px;
padding-right: 10px;
/* margin-top: 16px; */
height: 90px;
}
.mynav li:last-child{
border-right: 1px solid white;
}

.mynav li a{
color:white;
}
.mynav li a:hover{
text-decoration: none;
}
/* .mynav li a:active{
background-color: black;
}*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-transparent navbar-inverse">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Fashion Garage

<ul>

<li>
TRENDS
</li>

<li>
PRODUCTS
</li>

<li>
DESIGNERS
</li>

<li>
MEMBERS
</li>

<li>
SEARCH
</li>

<li>
MY ACCOUNT
</li>

</ul>







<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
</li>

<li data-target="#carousel-example-generic" data-slide-to="1">
</li>



<img src="img/lady-1.jpg" alt="Lady-1">

...

<img src="img/lady-2.jpg" alt="Lady-2">

...

...



<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

</nav>

相关讨论

如果您仍然遇到问题，我建议您重新开始并使用它：
它非常简单直接。不要将另一个类添加到 navbar 只是一个建议。您也可以替换 Bootstrap CSS 和 JS 的链接。这只是 CDN 链接。如果您有兴趣，这里是输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">

<style type="text/css">
body{
background-image: url('http://seamlesspatternchecker.com/hash/seamless-pattern-samples/a/3/5/a35-vector-vector-seamless-simple-pattern-curtain-design-modern-stylish-texture-repeating-abstract-158117696.jpg');
}

.navbar{
border: none;
border-radius: 0;
background-color: rgba(0,0,0,0.5);
}
</style>

<body>
<nav class="navbar navbar-inverse">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand

<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>

<li>
Link
</li>

<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">

<li>
Action
</li>

<li>
Another action
</li>

<li>
Something else here
</li>

<li class="divider">
</li>

<li>
Separated link
</li>

<li class="divider">
</li>

<li>
One more separated link
</li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-left" role="search">

<input type="text" class="form-control" placeholder="Search">

<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">

<li>
Link
</li>

<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">

<li>
Action
</li>

<li>
Another action
</li>

<li>
Something else here
</li>

<li class="divider">
</li>

<li>
Separated link
</li>

</ul>

</li>

</ul>



</nav>
</body>

在您网站的一部分中，在默认引导样式表之后加载新的自定义 CSS 文件。

1
2
3
4

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

在你的 custom.css

1
2
3
4
5

.navbar {
background-color: transparent;
background: transparent;
border-width: 0px;
}

这是我的代码笔，我尝试让导航栏透明且响应迅速。希望对你有帮助。

1
2
3
4

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>

</button>

你可以在这里找到其余的代码

试试这个：

1
2
3
4
5
6

.navbar {
background-color: transparent;
background: transparent;
}

.navbar li { color: #000 }

更新：
在 CSS 第二行替换： <nav class="navbar navbar-transparent navbar-inverse"> 到 <nav class="navbar navbar-transparent">

可能的答案：

Bootstrap-3 Navbar 的透明颜色

css 使引导导航栏透明

相关讨论