我正在尝试创建一个弹性布局，其中每个弹性项目“穿过”弹性框，显示弹性框下方的图像。我已经通过使用
mix-blend-mode但是，我还希望 Flex 项目有一个
backdrop-filter: blur以下代码片段说明了我想要实现的目标，但是背景过滤器似乎不起作用。
如何更新此代码片段以达到预期效果？
body {
margin: 0
}
.background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/3d/Fesoj_-_Papilio_machaon_%28by%29.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 20px;
width: 100%;
height: 50px;
background-color: black;
/* Used to make the flex items "cut through" the flex box */
mix-blend-mode: hard-light;
}
.box {
width: 100%;
height: 100%;
/* Ased to make the flex items "cut through" the flex box */
background-color: grey;
/* *** This doesnt seem to work *** */
backdrop-filter: blur(20px);
}<div class="background">
<div class="flex">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>body {
margin: 0
}
.background {
background: url("https://upload.wikimedia.org/wikipedia/commons/3/3d/Fesoj_-_Papilio_machaon_%28by%29.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
}
.layer{
width: 100%;
height: 100vh;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(20px);
display: flex;
justify-content: center;
align-items: center;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 20px;
width: 100%;
height: 50px;
background-color: black;
/* Used to make the flex items "cut through" the flex box */
mix-blend-mode: hard-light;
}
.box {
width: 100%;
height: 100%;
/* Ased to make the flex items "cut through" the flex box */
background-color: grey;
/* *** This doesnt seem to work *** */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="background">
<div class="layer">
<div class="flex">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>