0

quisiera saber como le puedo cambiar la opacidad del fondo del header sin cambiar la opacidad de los contenidos dentro eh buscado por varios sitios y no puedo encontrar como resolverlo si pueden ayudarme estaría agradecido

*{
    margin: 0;
    padding: 0;
}

header{
    width:100%;
    height: 70px;
    background: url(/img/colorFondo.jpg);
    opacity: 0.5;
}

.ancho{
    width: 80%;
    height: 70px;
    margin: auto;
}

.logo{
    width: 30%;
    height: 70px;
    float: left;
    padding-top: 2px;
    box-sizing: border-box;
}

.logo p img{
    width: 32%;
}

nav{
    width: 70%;
    height: 70px;
    float: left;
    text-align: right;
    padding-top: 24px;
    box-sizing: border-box;
}

nav ul li{
    display: inline;
    padding-left: 20px;
}

nav ul li a{
    text-decoration: none;
    font-family: rale;
    color: whitesmoke;
}

nav ul li a:hover{
    color: aqua;
}

@font-face {
    font-family: rale;
    src: url(/fonts/Raleway/static/Raleway-Regular.ttf);
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <div class="ancho">
            <div class="logo">
                <p><img src="/img/logoCopaNavideña.jpg" alt="logo" srcset=""></p>
            </div>
            <nav>
                <ul>
                    <li><a href="#">CRONOGRAMA</a></li>
                    <li><a href="#">GRUPO 1</a></li>
                    <li><a href="#">GRUPO 2</a></li>
                    <li><a href="#">GRUPO 3</a></li>
                    <li><a href="#">GRUPO 4</a></li>
                    <li><a href="#">GRUPO 5</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="zona1">

    </section>
</body>
</html>

GRACIAS POR EL INTENTO /---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/

1
  • Exactamente a qué objeto le querés dar una opacidad? A la imagen de fondo o un fondo sólido opaco? Commented el 6 ene. 2022 a las 0:04

1 respuesta 1

0

Para esto se puede usar los pseudoelementos ::before antes, y ::after que es después.

En éste caso use :before para colocar ahí la imagen de fondo. Es aquí que se puede usar con libertad una opacidad, ya sea con un fondo de color sólido o una imágen:

header:before {
 content: "";
 background: url(/img/colorFondo.jpg); 
 opacity: 0.5;
}

Suponiendo que la imagen de fondo sea una imagen (y no de un color sólido) se puede agregar un color de fondo al header, y esto para que convine el

  • color de fondo del header
  • Imagen de fondo del ::before
  • opacidad del ::before

Lo cual queda así:

*{
    margin: 0;
    padding: 0;
}

header{ 
 position: relative;
 width:100%; 
 height: 70px;  
 background-color: violet; /* opcional */
} 

header:before {
 content: "";
 position: absolute;
 z-index: 0;
 width: 100%;
 height: 100%;
 background: url(https://placeimg.com/640/480/arch); 
 background-size: 100%;
 background-repeat: no-repeat;
 opacity: 0.5;
}

.ancho{
    width: 80%;
    height: 70px;
    margin: auto;
}

.logo{
    width: 30%;
    height: 70px;
    float: left;
    padding-top: 2px;
    box-sizing: border-box;
}

.logo p img{
    width: 32%;
}

nav{
    width: 70%;
    height: 70px;
    float: left;
    text-align: right;
    padding-top: 24px;
    box-sizing: border-box;
}

nav ul li{
    display: inline;
    padding-left: 20px;
}

nav ul li a{
    text-decoration: none;
    font-family: rale;
    color: whitesmoke;
}

nav ul li a:hover{
    color: aqua;
}

@font-face {
    font-family: rale;
    src: url(/fonts/Raleway/static/Raleway-Regular.ttf);
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <div class="ancho">
            <div class="logo">
                <p><img src="/img/logoCopaNavideña.jpg" alt="logo" srcset=""></p>
            </div>
            <nav>
                <ul>
                    <li><a href="#">CRONOGRAMA</a></li>
                    <li><a href="#">GRUPO 1</a></li>
                    <li><a href="#">GRUPO 2</a></li>
                    <li><a href="#">GRUPO 3</a></li>
                    <li><a href="#">GRUPO 4</a></li>
                    <li><a href="#">GRUPO 5</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <section class="zona1">

    </section>
</body>
</html>

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.