recherche

Maison  >  Questions et réponses  >  le corps du texte

Un div enfant peut-il remplacer les styles parents et agir comme un portail ?

Je souhaite créer un div parent contenant des div enfants. Le style des parents est

width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  z-index: 8888;
  top: 0;
  left: 0;

Le sous-style est

background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;

Existe-t-il un moyen de faire en sorte qu'un élément enfant se comporte comme un portail, avec la zone dans laquelle il se trouve en supprimant le flou du div parent et la couleur d'arrière-plan ?

tl;Dr. Quelque chose qui ressemble à ça

P粉821231319P粉821231319335 Il y a quelques jours360

répondre à tous(1)je répondrai

  • P粉043432210

    P粉0434322102024-03-21 00:20:30

    --Modifier--

    Si la question est de savoir comment restaurer le filtre d'arrière-plan dans le div enfant, vous pouvez utiliser

    backdrop-filter: none;

    Cependant, si vous souhaitez hériter de cette propriété du parent du parent, vous devez le faire en JavaScript

    element.style.backdropFilter = element.parentNode.parentNode.style.backdropFilter;

    Trois façons de procéder en CSS

    1 Utiliser la position relative div

    div : {
      width: 100vw;
      height: 100vh;
      position: fixed;
      background-color: rgb(0 0 0 / 0.25);
      backdrop-filter: blur(2px);
      background-clip: text;
      z-index: 8888;
      top: 0;
      left: 0;
    }
    
    div div {
      background-color: transparent;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 400px;
      top: 400px;
    }

    2 identifiants d'utilisation

    #mainID : {
      width: 100vw;
      height: 100vh;
      position: fixed;
      background-color: rgb(0 0 0 / 0.25);
      backdrop-filter: blur(2px);
      background-clip: text;
      z-index: 8888;
      top: 0;
      left: 0;
    }
    
    #subDivID {
      background-color: transparent;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 400px;
      top: 400px;
    }

    3 classes d'utilisation

    .mainID : {
      width: 100vw;
      height: 100vh;
      position: fixed;
      background-color: rgb(0 0 0 / 0.25);
      backdrop-filter: blur(2px);
      background-clip: text;
      z-index: 8888;
      top: 0;
      left: 0;
    }
    
    .subDivClass {
      background-color: transparent;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 400px;
      top: 400px;
    }

    répondre
    0
  • Annulerrépondre