79498170

Date: 2025-03-10 13:48:26
Score: 0.5
Natty:
Report link

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>

Reasons:
  • Blacklisted phrase (1): está
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Estiven Montoya Torres