CSS上的一致模糊？

Question

所以尝试在CSS中模拟毛玻璃效果时遇到了问题。如果有问题的div居于背景图片上方，我就能使效果正常工作，但是如果我尝试将其移到某个角落（即“模糊”效果稍微偏离画布），会导致部分无法模糊。我假设这是因为它不是在拾取图像信息以使其模糊，而只是在拾取空白像素。您可以在此处的代码库中看到：codepen link

这是我当前在模糊div上使用的mixin：

content: " ";
background: inherit;
background-attachment: inherit;
position: absolute;
height: calc(100% + 50px);
width: calc(100% + 50px);
left: -25px;
right: 0px;
top: -25px;
bottom: 0px;
filter: blur(20px);

我正在制作一个使父div溢出的div，然后将其偏移特定的量以提供清晰的模糊边缘。

是否存在一些骇人听闻的解决方案，可以让它从身体溢出，同时仍然从重复图像或其他内容中获取图像信息？

Answer 1

将此添加到您的混入中：

transform: scale(1.75);

这将在保持模糊效果/大小的同时增大背景宽度和高度。