it-swarm.com.de

css um bootstrap navbar transparent zu machen

Ich benutze Bootstrap und ich habe eine Navbar in meiner HTML-Datei. Ich möchte diese Navbar transparent machen, um das Hintergrundbild anzuzeigen. Kann mir jemand beibringen, wie man das mit css macht? Ich habe versucht mit dem folgenden CSS nichts passiert

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

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="brand" href="#">lol</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">
                                <li class="active"><a href="/">Home</a></li>
                                <li><a href="about">About</a></li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
32
pythoniku

Ich konnte die Navigationsleiste transparent machen, indem ich der .navbar eine neue .transparent-Klasse hinzufügte und das CSS folgendermaßen festlegte:

 .navbar.transparent.navbar-inverse .navbar-inner {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

Mein Markup ist so

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....
24
scottM

Fügen Sie dies einfach zu Ihrer CSS hinzu: -

.navbar-inner {
    background:transparent;
}
56
Akshãy Paghdar

Was Sie tun, ist unnötig. 

Für transparenten Hintergrund müssen Sie einfach Folgendes tun:

<div class="navbar">
// your navbar content
</div>

ohne Klasse navbar-default oder navbar-invers.

51
Jochem Stoel

Wenn Sie die neueste Version von Bootstrap und Ruby on Rails verwenden, können Sie diese einfach in die Datei html.erb eingeben: 

<nav class="navbar navbar-transparent">

Und das ist alles was Sie brauchen.

18
Kelly M Curtis

Es gibt keinen Grund für all dieses Chaos.  

Sie können die Navigationsleiste transparent machen, indem Sie navbar-defaultor .__ nicht schreiben. navbar-inverse

<nav class="navbar">  //Don't add navbar-default to the class

  //

</nav>
7
Siva Prakash

in Bootstrap 3.3.7 (und 4.0 vermutlich) funktioniert dies:

anstatt:

<nav class="navbar navbar-inverse navbar-fixed-top">

benutzen:

<nav class="navbar bg-transparent navbar-fixed-top">

kein CSS erforderlich!

3
wla312

CSS-Code:

.header .navbar-default {
  background: none;
}

HTML Quelltext:

<header>
    <nav class="navbar navbar-default"></nav>
</header>
3
Richard King

Wenn Sie die standardmäßige Navbar mit Bootstrap belassen, funktioniert das problemlos.
Sie müssen nur die benutzerdefinierte CSS hinzufügen, so dass alles noch so funktioniert, wie es sollte.

HTML:

<nav class="navbar navbar-default">

CSS:

.navbar-default {
    background-color: transparent;
}
2
Nikki Pantony

Fügen Sie der Navbar die bg-transparent-Klasse hinzu.

<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>
2
Amanda Treutler

Update 2018

Bootstrap 4

Die Navbar ist standardmäßig transparent. Denken Sie daran, navbar-light oder navbar-dark zu verwenden, damit die Linkfarben dem Kontrast der Hintergrundfarbe entgegenwirken.

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
2
Zim

Versuchen Sie dies in Ihrem Code, es hat für mich funktioniert -

geben Sie dem Element eine ID, für die Sie transparent machen möchten

für zB nach Ihrem Code -

<div class="navbar-inner" id="nav1">

Dann wenden Sie dies in Ihrem CSS-Code an.

#nav1
{  
    background-color:#F00;  /*whichever you want*/
    opacity: 0.5;           /*0.5 determines transparency value*/ 
    filter:(opacity=50);       
}
1

Weiter zu Jochem Stoels Antwort ... Ich habe der Klasse des DIV-Tags "navbar-fixed-top" hinzugefügt und es hat funktioniert.

1
Jatin Grover
<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;">

<!--This should work just fine. it will make it transparent. hope i helped!-->
1
Grant Hood

Wenn Sie die neueste Version von Bootstrap, dh 4.0.0, verwenden, müssen Sie nur das Schlüsselwort 'transparent' verwenden:

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

Es ist einfach nicht erforderlich, css anzuwenden, da Bootstrap diese Eigenschaft eingebaut hat.

0
Tahir77667

Für Spring + Thymeleaf (boostrap) Projekt verwende ich normalerweise:

In css der folgende Code

.navbar-inner {
        background:transparent;
    }

Innerhalb des HTML-Codes die Zeile

<nav class="navbar-inner">
0
cyberdemon

Testen Sie mit background-image: none. Diese Eigenschaft entfernt den linear-gradient.

Sie können das Ergebnis hier sehen: http://jsfiddle.net/eugip9/8D36M/

0
Pigueiras