模糊网站的侧面

Question

模糊侧站点[1] ：https://i.stack.imgur.com/giurR.jpg

如何模糊网站的侧面：https://i.stack.imgur.com/bIgfz.png

#main-style {
position: relative;
}
#main-style::after {
content: "";
width: 100%;
height: 135%;
position: absolute;
top: -30px;
left: 0;
overflow: hidden;
filter: blur(5px);
}

这个代码不起作用

Answer 1

只需将您编写的代码filter: blur(5px);替换为backdrop-filter: blur(5px)

说明：您之前编写的代码通过拍摄元素的快照并在元素的位置显示具有模糊效果的快照来工作。backdrop-filter反而模糊了元素的背景。

注：到目前为止，backdrop-filter不适用于Firefox浏览器。