bootstrap transparent navbar

Question

Ich versuche, die Navbar transparent wie etwa this zu machen. Aber ich kann es nicht zur Arbeit bringen. Ich habe rga (0,0,0,0,5) in der Navbar-Klasse hinzugefügt.

Answer 1

Ich habe es gerade herausgefunden. Für alle, die das in Zukunft brauchen. Ich habe eine CSS außer Kraft gesetzt war:

.navbar.transparent.navbar-inverse .navbar-inner { 
    background: rgba(0,0,0,0.4); 
} 

Und meine HTML-Syntax wie folgt aussieht:

<div class="navbar transparent navbar-inverse navbar-fixed-top"> 
    <nav class="navbar-inner"> 
    ... 
    </div> 
</div> 

Answer 2

Zuerst denke ich, Sie die falsche Syntax für RGB oder RGBA Sie

rga(0,0,0,0.5) 

schrieb In Wirklichkeit sollte es

sein

rgba(0,0,0,0.5); 

Lassen Sie dies für ein Beispiel nehmen:

HTML

<div class="navbar"> 
    <ul> 
    <li>Menu1</li> 
    <li>Menu2</li> 
    </ul> 
</div> 

CSS

.navbar { 
    background: rgba(0,0,0,0.5); 
    } 

Ich würde auch vorschlagen, eine Ersatzfarbe haben, nur für den Fall, dass die Menschen ein Browser verwenden unterstützt es nicht.

CSS Fallback

.navbar { 
     background: rgb (0,0,0); 
    } 

Answer 3

können Sie auch wie dieser verwenden

.navbar-default { 
    background: none; 
} 

oder

.navbar { 
    background: none; 
} 

Sie werden transparenten Hintergrund bekommen.

Answer 4

Für eine transparente Navbar ist es ziemlich einfach. Im CSS-Dokument können Sie eines von drei Dingen tun.

A. Der einfache Weg, aber Sie lernen nicht zu viel mit dieser Methode. Sie können das CSS-Dokument buchstäblich eingeben, dass der Hintergrund der Navigationsleiste transparent ist. Ziemlich einfach:

.navbar 
{ 
    background-color: transparent; 
} 

B. Sie indirekt den Alphakanal für die RGBA Hintergrundfarbe zu etwas zwischen 0 und 1. Die R-, G- und B-Koordinaten eingestellt steuern kann die rot, grün und blau von der Pixel jeweils. Der A- oder Alpha-Kanal steuert die Deckkraft/Transparenz. Für R, G und B können Sie einen Wert zwischen 0 und 255 eingeben. Für den A-Alpha-Kanal müssen Sie jedoch einen Wert zwischen 0 und 1 eingeben. 1 bedeutet, dass es vollständig undurchsichtig ist (nicht transparent, aka vollständig sichtbar), und 0 bedeutet, dass es vollständig transparent (unsichtbar) ist. Wenn Sie unterschiedliche Werte für den Alphakanal festlegen, können Sie entscheiden, wie transparent Ihre Navigationsleiste sein soll. Sehr nützlich, wenn Sie die Navigationsleiste zu einer feststehenden machen und auf Ihrer Webseite unterschiedliche Hintergrundfarben haben.

Oh, und von Farben sprechen ... es gibt mehr.

Sie können dies einen Schritt weiter gehen.Wenn Sie möchten, dass Ihre Navigationsleiste transparent ist und einen helleren/weißlichen Farbton aufweist, können Sie Folgendes tun.

.navbar 
{ 
    /* White tint with 0.5 opacity. */ 
    background-color: rgba(255,255,255,0.5); 
    /* Notice how RGB of 255,255,255 is white. */ 
} 

Oder, wenn Sie Ihr navbar wollen mit einem dunkleren, schwärzer Tönung transparent sein, können Sie wie folgt vorgehen:

.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. */ 
} 

Nun, wenn Sie Ihre transparenten navbar geben wollen, zum Beispiel , eine grüne Tönung, verwirren Sie mit dem grünen Wert G! Für rot, rum mit dem R-Wert. Für Blau, verwirren Sie mit dem B-Wert herum. Für ein Hex-Grün # 008f00 oder (0,143,0) in RGB, wäre es so etwas wie diese:

.navbar 
{ 
    /* Green tint of RGB 0,143,0, and with 0.5 opacity. */ 
    background-color: rgba(0,143,0,0.5); 
} 

hoffte, das hilft!