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

bigao • • 问答 • 282 阅读

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>

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

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

        <li data-target="#carousel-example-generic" data-slide-to="1">
</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 -->

new

相关讨论
  • 你能包括你所有的CSS吗？因为使用您提供的代码，它似乎工作正常。我猜想 .navbar-inverse 样式正在被 CSS 中的其他内容覆盖这是它的一个代码笔：codepen.io/anon/pen/ZGYvWx
  • 当你要求@Zac.Ledyard 添加完整的 CSS
  • 有趣的是，它似乎仍然对我有用：codepen.io/anon/pen/ZGYvWx

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

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

        <!-- /.navbar-collapse -->
      <!-- /.container-fluid -->
    </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> 到 <nav>

可能的答案：

Bootstrap-3 Navbar 的透明颜色

css 使引导导航栏透明

相关讨论
  • 检查更新：将 <nav> 替换为 <nav>
  • 尝试更新..现在获取白色导航栏。感谢您的努力，但还有其他问题@ptCoder
  • 尝试添加这个。navbar-inner { background:transparent; }
  • 没有帮助:(..导航栏变成白色
  • 白色还是透明？
  • 添加了新的导航栏..它的白色
以上是关于html：如何让Twitter Bootstrap Navbar 透明？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>