Algo que podrías hacer es utilizar un color transparentoso en lugar de darle opacidad al body, así evitas lo que te está pasando y llegas al resultado que deseas.
body {
background-image: url('https://images.unsplash.com/photo-1739538475083-43bbf5c47646?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MDkzMDB8&ixlib=rb-4.0.3&q=80&w=400');
background-repeat : no-repeat ;
background-position : center;
background-size: contain;
/* Elimina la opacidad del body, ya que es heredada */
}
.outer {
width:60%;
height: 400px;
margin:auto;
padding-top: 2rem;
/* Establece para los contenedores que son translúcidos, su color de fondo con su nivel de transparencia, para evitar afectar sus hijos */
background-color: rgb(255, 255, 255, 0.8)
}
.inner {
width:30%;
height:50%;
margin:auto;
text-align:center;
display:flex;
}
.top {
position:sticky;
top:0;
z-index:1;
height: 3rem;
width:40%;
margin: auto;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
font-size:200%;
background : white;
text-align: center;
}
.left {
float:left ;
padding-left:1rem;
padding-right:1rem;
}
<body>
<div class='top'>
This is the top
</div>
<div class='outer'>
<div class='inner'>
<div class='left'>
Inner
</div>
<div class='left'>
<img height=200px; width=200px;
src='https://images.unsplash.com/photo-1739961097716-064cb40a941e?rop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDE2MTEzNzh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</div>
</div>
</div>
</body>