0

estoy empezando con un proyecto y al momento de colocar mi logo("Imagen") en el nav no toma el color de fondo de este(La imagen esta en formato png), por favor necesito ayuda.

HTML

<header>
    <nav class="navbar navbar-light bg-light">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="./img/Logo.png" height="100"/>
          </a>
        </div>
      </nav>
</header>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    background: linear-gradient(90deg, #72C6EF 0%, #004E8F 100%);}

Así es como se me ve introducir la descripción de la imagen aquí

3
  • 1
    ¿Las clases del navbar? ¿Que hayas seteado explícitamente con un comodín (*) que el color de fondo sea blanco? Por cierto, escribí en el título cuál es el problema: "logo en el navbar" no es descriptivo. Leé Cómo preguntar.
    – padaleiana
    el 3 feb. 2022 a las 13:16
  • 1
    Si lo que buscas es transparencia del actual fondo blanco de tu logo no basta con que sea PNG, sino que ademas le tienes que indicar que efectivamente el color blanco ha de ser transparente con algun editor de imagenes que lo permita
    – masterguru
    el 3 feb. 2022 a las 14:03
  • 1
    Probablemente tu imagen tenga ese fondo blanco, verifica que no tenga ningún fondo, en caso tenga fondo, puedes recurrir a la página web Remove bg que sirve para quitar fondos blancos de manera rápida. el 3 feb. 2022 a las 14:18

1 respuesta 1

1

Amigo tienes puesta una propiedad:

background: linear-gradient(90deg, #72C6EF 0%, #004E8F 100%); 
//Esta propiedad lo que hace es hacer ese degrade azul que vez.

En su lugar, deberias remplazar el color del bakcground de tu header con el color de tu logo en este caso blanco.

HTML

<header>
    <nav class="navbar navbar-light bg-light">
        <div class="container">
          <a class="navbar-brand" href="#">
            <img src="./img/Logo.png" height="100"/>
          </a>
        </div>
      </nav>
</header>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    background: #ffffff;
}

Con esto el fondo de tu header tendria que ser blanco(De el color de tu logo). Aunque no es lo mas optimo, te recomiendo hacer tu logo .png para que no tengas que colocar el fondo del header del mismo color del fondo de tu logo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.