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>