如何模糊一个元素，而没有它的模糊覆盖其周围的元素时，使用过滤器:blur()?

Question

正如您在我提供的基本示例中所看到的，我使用filter: blur()模糊maindiv，但是，模糊的黑色会超过我的粉红色headerdiv。我想知道是否有一种方法来避免这种不想要的效果?

.container {
display: flex;
flex-direction: column;
}
.header {
width: 100%;
height: 60px;
background-color: pink;
}
.main {
width: 100%;
height: 400px;
background-color: black;
filter: blur(50px);
}

<div class="container">
<div class="header"></div>
<div class="main"></div>
</div>

Answer 1

您可以将您的模糊内容包装在容器中，您将overflow属性设置为hidden:

.container {
display: flex;
flex-direction: column;
}
.header {
width: 100%;
height: 60px;
background-color: pink;
}
.wrapper {
width: 100%;
height: 400px;
overflow: hidden;
}
video {
filter: blur(50px);
width: 100%;
height: 100%;
object-fit: cover;
}

<div class="container">
<div class="header"></div>
<div class="wrapper">
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" muted autoplay loop></video>
</div>
</div>

Answer 2

不幸的是，由于blur属性只接受半径值，我看不到任何其他方法，只能"破解"您的方式，请参阅我在代码注释中的建议。

.container {
display: flex;
flex-direction: column;
}
.header {
width: 100%;
height: 60px;
background-color: pink;
margin-bottom:30px; /* add a margin to the element to push it away from the blur */
}
.main {
overflow:hidden;
width: 100%;
height: 400px;
background-color: black;
filter: blur(10px); /* reduce the blur radius ? */
}

<div class="container">
<div class="header"></div>
<div class="main"></div>
</div>