1

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>

2
  • 3
    Le estás aplicando opacidad a todo el body, CSS significa Cascading Style Sheet... cascading, porque las propiedades se heredan hacia abajo. Si usas 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.
    – Benito-B
    Commented el 24 ago. 2023 a las 19:25
  • Realice el ajuste que me indicas, pero continua aplicando el opacity al form.
    – SBK22
    Commented el 24 ago. 2023 a las 19:42

1 respuesta 1

4

Tal como Benito-B mencionó, se está aplicando el opacity a todo el body, por lo tanto es de esperar que se aplique la propiedad incluso al formulario.

Lo que se puede hacer es convertir el color de fondo a rgb (con cualquier herramienta que convierta hexadecimal a rgb), y luego utilizar la función rgb pasando como último argumento la transparencia (alpha), y establecer esto como el background-color del #container, en este caso:

background-color: rgb(187, 200, 214, 0.8); /*o ".8", que es lo mismo*/


Prestar atención al código comentado.

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

#container {
  /*background: #bbc8d6;*/
  background-color: rgb(187, 200, 214, 0.8); /*transparencia de 0.8*/
  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>

Tal como recomendaron, es además conveniente reestructurar el código para no mezclar los estilos inline con los CSS externos.

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.