2

Quiero tener un div que haga como de fondo que sea un poco transparente, y otro div superior que no sea transparente, pero al poner la transparencia en el div padre también le afecta al div hijo, alguien sabe como puedo superarlo. Aquí dejo mi código

* {
    margin: 0px;
    padding: 0px;
}

    html, body {
    height: 100%;
}

    body {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 70%;
    background-color: rgb(9, 9, 9);
    margin-right: 6em;
    opacity: 0.8;
    border-radius: 15px;
}

    .character {
    width: 50%;
    height: 70%;
    background-color: red;
}
<body>

    <div class="main">
        <div class="character">
            
        </div>
    </div>

</body>

1 respuesta 1

3

Eso es por que la opacidad se la estás dando al contenedor... cuando se la tienes que dar al color simplemente.

* {
  margin: 0px;
  padding: 0px;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 70%;
  background-color: rgb(9, 9, 9, 0.1); //aca podes ver el cambio
  margin-right: 6em;
  border-radius: 15px;
}

.character {
  width: 50%;
  height: 70%;
  background-color: red;
    opacity: 1.1;
}
<body>

  <div class="main">
    <div class="character">

    </div>
  </div>

</body>

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.