Tengo una página de login en mi sistema y estoy aplicando una imagen de fondo a dicha página. La idea es aplicar opacity para dejar la imagen transparente y que el formulario destaque por sobre la imagen.
Mi problema es que al aplicar opacity a la imagen, también se aplica al formulario. He intentado solucionarlo por medio de CSS, pero no lo he logrado.
Código CSS de página login
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
background: #bbc8d6;
width: 100%;
height: 100vh;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
}
body {
background-position: center;
background-repeat: no-repeat;
position: relative;
opacity: 0.80;
background-size: cover;
}
#container form {
background: #008080;
width: 450px;
border-radius: 8px !important;
margin-bottom: 100px;
}
#container form img {
margin: 10px auto;
text-align: center;
display: block;
border: 3px solid #fff;
border-radius: 5px;
margin-top: 25px;
}
#container form input {
width: 90%;
padding: 5px;
font-size: 14pt;
display: block;
margin: 25px auto;
border: 1px solid #85929e;
text-align: center;
}
#container form input:hover {
width: 90%;
padding: 5px;
font-size: 14pt;
display: block;
margin: 25px auto;
border: 1px solid #004aae;
text-align: center;
}
#container form input[type="submit"] {
background: #0975ce;
padding: 10px;
color: #FFF;
letter-spacing: 1px;
border: 0;
cursor: pointer;
}
#container form input[type="submit"]:hover {
background: #0975ce;
padding: 10px;
color: #ff6600;
letter-spacing: 1px;
border: 0;
cursor: pointer;
}
<body style='background-image:
url("https://offloadmedia.feverup.com/madridsecreto.co/wp-content/uploads/2019/01/27172709/planes-gratis-madrid.jpg"); '>
<section id="container">
<form action="" method="post">
<h3>Iniciar Sesión</h3>
<input type="text" name="usuario" placeholder="Usuario">
<input type="password" name="clave" placeholder="Contraseña">
<input type="submit" value="INGRESAR">
</form>
</section>
</body>
color: red; font-weight: bold;
en el body no te extrañaría que luego tus div y párrafos tengan la fuente roja no? Pasa lo mismo con la opacidad... los atributos se heredan. Simplemente machaca el valor a continuación por ejemplo:section { opacity: 1; }
. Aunque personalmente, yo reestructuraría un poco la página, no me gusta aplicar estilos así al propio body, es mejor usar un div con width y height 100% para ello, queda más limpio.