Barra de navegación transparente Bootstrap

Solución:

Me lo imaginé. Para cualquiera que necesite esto en el futuro. Agregué una anulación de CSS que fue:

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

Y mi sintaxis html se ve así:

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

Incluso puedes usarlo así

.navbar-default {
  background: none;
}

o

.navbar {
  background: none;
}

Obtendrás un fondo transparente.

Para una barra de navegación transparente, es bastante fácil. En el documento CSS puede hacer una de estas tres cosas.

R. De la manera fácil, pero no se aprende demasiado con este método. Literalmente, puede escribir en el documento CSS que el fondo de la barra de navegación es transparente. Bastante simple:

.navbar
{
    background-color: transparent;
}

B. Puede establecer indirectamente el canal alfa para el color de fondo RGBA entre 0 y 1. Las coordenadas R, G y B controlan el rojo, el verde y el azul de los píxeles, respectivamente. El canal A, o alfa, controla la opacidad / transparencia. Para R, G y B, puede ingresar un valor entre 0 y 255. Sin embargo, para el canal alfa A, debe ingresar un valor entre 0 y 1. 1 significa que es completamente opaco (no transparente, también conocido como completamente visible) y 0 significa que es completamente transparente (invisible). Establecer diferentes valores para el canal alfa puede ayudarlo a decidir qué tan transparente desea que sea su barra de navegación. Muy útil si hace que la barra de navegación sea una parte superior fija y tiene diferentes colores de fondo en toda su página web.

Ah, y hablando de colores … hay más.

Puede llevar esto un paso más allá. Si desea que su barra de navegación sea transparente y tenga un tinte más claro / blanquecino, puede hacer lo siguiente.

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

O, si desea que su barra de navegación sea transparente con un tinte más oscuro, puede hacer lo siguiente:

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

Ahora, si desea darle a su barra de navegación transparente, por ejemplo, un tinte verde, ¡juegue con el valor de G verde! Para el rojo, juega con el valor R. Para el azul, juega con el valor B. Para un verde hexadecimal de # 008f00, o (0,143,0) en RGB, sería algo como esto:

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

¡Espero que esto ayude!

---

---

Utiliza Nuestro Buscador