Je veux avoir une pile de DIV, comme des cartes, qui ont un arrière-plan semi-transparent. Cependant, je ne veux pas que leurs valeurs alpha s'additionnent. Par exemple dans l'exemple ci-dessous où mes deux cartes se chevauchent:

![Overlapping cards

Je veux que la zone de chevauchement ne soit pas plus sombre mais de la même couleur que les cartes individuelles (elles ont toutes la même opacité et la même couleur). Je sais que je pourrais mettre un div "backing" pour réinitialiser l'alpha et imiter cet effet, mais ce serait évident car l'arrière-plan n'est pas une couleur plate.

Je regarde mix-blend-mode et background-blend-mode mais je n'arrive pas à savoir si l'un d'entre eux produit l'effet que je recherche. En tant que familier de Photoshop, je ne pense pas qu'aucune de ces options ne fonctionnerait, mais j'espère que quelqu'un sait ce que cela fait.

La seule alternative à laquelle je puisse penser est de créer par programme des DIV longs et étroits et de les attacher au bas de ma carte du haut pour simuler l'effet d'empilement. Cependant, je ne suis pas sûr de la meilleure façon de révéler les cartes suivantes au besoin.

0
Primus202 20 févr. 2021 à 04:19

1 réponse

Meilleure réponse

Vous pouvez simuler cette utilisation mask:

.box {
  height:300px;
  position:relative;
  background:url(https://picsum.photos/id/1018/800/600) center/cover
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  -webkit-mask:
    /* your first div          position  /  size  */
    linear-gradient(#fff 0 0)  20px 50px / 30%  20%,
    /* your second div         position  /  size  */
    linear-gradient(#fff 0 0)  30px 50px / 20%  30%,
    /* your third div          position  /  size  */
    linear-gradient(#fff 0 0)  80%  0    / 100px 200px;
    /*and so on ...*/
  -webkit-mask-repeat:no-repeat;
}
<div class="box">

</div>
1
Temani Afif 20 févr. 2021 à 08:09