html - CSS背景过滤器在滑出菜单中的子元素上不起作用

Question

我正在尝试申请 backdrop-filter对包含两个嵌套 div 的滑出式菜单的影响s。我设法解决了如何改变元素定位的问题，但出于某种原因，只要菜单的底部嵌套在顶部的“选项卡”内，下部的过滤器就不会功能，如左图所示。如果仅应用于内部 div，它确实有效(如右图所示)但我希望对两者都有影响。如果它们不是嵌套的，我不知道如何在悬停工作时进行滑出过渡。

我发现最接近这个问题的讨论是 here但我不确定它是如何适用的。

这是演示:

body {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px);
  height: 100%;
  width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: #F0F8FF;
}

/* -------------------GLASS EFFECT------------------- */

.glass {
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.45) 24%,
      hsla(0, 0%, 100%, 0.4) 25%,
      hsla(0, 0%, 100%, 0.2) 45%,
      hsla(0, 0%, 100%, 0.1)
    );
  background-size: 300% 100%;
  border-radius: 10px;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
}
.frame {
  padding: 20px;
}
.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------Menu version------------------- */

.glassUpper {
  position: fixed;
  bottom: 0px;
  width: 35px;
  height: 30px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  padding: 5px 2px 0 2px;
  text-align: center; 
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}
#menuUpperRight {
    right: 40px;
}
#menuUpperLeft {
    left: 40px;
    backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassLower {
  position: fixed;
  bottom: -120px;
  right: 40px;
  width: 200px;
  height: 110px;
  padding: 5px 0px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  text-align: center;
  opacity: 0.75;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}
#menuLowerRight {
  right: 40px;
  border-radius: 10px 0 0 0;
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
#menuLowerLeft {
  left: 0px;
  border-radius: 0 10px 0 0;
  transform: translate3d(0, 0, 0);
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassUpper:hover {
  bottom: 120px;
}
#menuUpperRight:hover #menuLowerRight {
  bottom: 0;
}

<!-- First -->
<div class="glass frame centered">
  <section class="content">
    <p>A light glass-effect frame.</p>
  </section>
</div>

<!-- Menus! -->
  <div class="glassUpper" id="menuUpperRight">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>
    <div class="glassLower" id="menuLowerRight">
        <p>Working when applied to child dev only!</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
  </div> 

  <div class="glassUpper" id="menuUpperLeft">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>

    <div class="glassLower" id="menuLowerLeft">
        <p>Backdrop Filters broken on child div???</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
  </div> 

Answer 1

使用额外的包装器可以解决这个问题，然后您可以将元素上/下作为单独的内部:

body {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px);
  height: 100%;
  width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: #F0F8FF;
}

/* -------------------GLASS EFFECT------------------- */

.glass {
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.45) 24%,
      hsla(0, 0%, 100%, 0.4) 25%,
      hsla(0, 0%, 100%, 0.2) 45%,
      hsla(0, 0%, 100%, 0.1)
    );
  background-size: 300% 100%;
  border-radius: 10px;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
}
.frame {
  padding: 20px;
}
.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------Menu version------------------- */

.glassUpper {
  width: 35px;
  height: 30px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  padding: 5px 2px 0 2px;
  text-align: center; 
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}

#menuUpperLeft {
    backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassLower {
  width: 200px;
  height: 110px;
  padding: 5px 0px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  text-align: center;
  opacity: 0.75;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}

#menuLowerLeft {
  border-radius: 0 10px 0 0;
  transform: translate3d(0, 0, 0);
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}

.extra{
  position: fixed;
  top: calc(100% - 35px);
  left: 40px;
  transition:0.5s;
  pointer-events:none;
}
.extra * {
  pointer-events:initial;
}
.extra:hover {
  top: calc(100% - 155px);
}

<!-- First -->
<div class="glass frame centered">
  <section class="content">
    <p>A light glass-effect frame.</p>
  </section>
</div>

<!-- Menus! -->

  <div class="extra">
  <div class="glassUpper" id="menuUpperLeft">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>
  </div>
    <div class="glassLower" id="menuLowerLeft">
        <p>Backdrop Filters broken on child div???</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
    </div>