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

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

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

<!— /mynav —>
<!— /navbar-header —>
<!— /container —>

<!— Indicators —>

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

<!— Wrapper for slides —>

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

…

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

…

…

<!— Controls —>

<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><!— /nav —>

<!— /wrapper —>

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269191.html

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

How to make Twitter Bootstrap Navbar transparent?

相关推荐

发表回复