JSFiddle - React, Tailwind, and code Playground

HTML

<div class="divVerte"></div>
<div class="divBlanche">
  <p>On peut voir ici que le background du body est blanc.<br><br>Avec les z-index l'ordre d'affichage des éléments (du plus bas au plus haut) est body > divBlanche > divVerte > p. Alors que visuellement on dirait que la div blanche est au-dessus de la verte.<br><br>Mais surtout, ce que je cherche à avoir comme rendu c'est que le blanc de la div blanche et du body se confondent. De sorte que ma div blanche soit invisible sauf lorsqu'elle survole les taches de couleurs qu'elle éclaircirait. L'idée c'est de rendre le texte discretement plus lisible.</p>
</div>

CSS

* {
  box-sizing:border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: url(https://www.sarinoty.com/imgs/bgTab.webp);
  display: grid;
}

.divVerte {
  z-index: 4;
  width: 90%;
  height: 90%;
  background: rgba(98, 200, 0, 0.1);
  display: grid;
  justify-self: center;
  align-self: center;
  position: relative;
}

.divBlanche {
  z-index: 2;
  width: 60%;
  height: 60%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  position: absolute;
  top: 20%;
  left: 20%;
}

p {
  z-index: 6;
  justify-self: center;
  align-self: center;
  max-width: 50%;
}