CSS 背景过滤器无法在滑出式菜单中的子元素上运行
CSS Backdrop-filter not functioning on child element in slideout menu
我正在尝试将 backdrop-filter 效果应用于包含两个嵌套 div 的滑出式菜单。我已经设法解决了如何改变元素定位的问题，但出于某种原因，只要菜单的底部嵌套在顶部 "tab" 内，下部的过滤器就不会' 功能，如左图所示。如果将 only 应用于内部 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>
使用额外的包装器可以解决这个问题，然后您可以将元素 upper/lower 单独放在里面：
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>
我正在尝试将 backdrop-filter 效果应用于包含两个嵌套 div 的滑出式菜单。我已经设法解决了如何改变元素定位的问题，但出于某种原因，只要菜单的底部嵌套在顶部 "tab" 内，下部的过滤器就不会' 功能，如左图所示。如果将 only 应用于内部 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>
使用额外的包装器可以解决这个问题，然后您可以将元素 upper/lower 单独放在里面：
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>