Javascript 调整页面大小时，对div的光泽背景使用Blur.js不起作用

我正在使用blur.js为html文档中的元素提供光泽模糊效果。问题是，它只在覆盖背景大小时才起作用。一旦我重新调整页面大小或将页面加载到不同大小的屏幕上，它就会变得一团糟。由于blur.js不适用于JSfiddel，因此我无法向您展示演示，但请看一下代码和图像plz

CSS:

body {
  margin: 0;
  overflow: hidden;
  background:url('../img/spiral_galaxy-1920x1080.jpg');
    background-size: cover;
    background-repeat:no-repeat;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:rgba(255,255,255,1);
    width:500px;
    height:250px;
}

身体

<div class="centered">text</div>

<script src="js/interactive.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){
            $('.centered').blurjs({
                overlay: 'rgba(255,255,255,0.1)',
                radius:20
            });
        });
 </script>

文本
$（文档）.ready（函数（）{
$（'.centered'）.blurjs({
叠加：“rgba（255255,0.1）”，
半径：20
});
});

---

有没有办法让它在任何大小的屏幕上都保持模糊？

您的屏幕大小可能与图像大小匹配：这只是巧合，这就是为什么您看不到背景大小：封面有任何问题的原因全屏显示时

blur.js将使用背景图像的base64部分设置

.centered

div的背景，背景图像的base64部分为其正常大小，它不会补偿背景图像的大小调整。背景尺寸

为封面始终调整图像的大小以适合其作为背景的div的大小

有没有办法让它在任何大小的屏幕上都保持模糊

它总是模糊的，所以我想你的意思是用与背景匹配的模糊来保持模糊。只能在没有
背景尺寸：封面的情况下进行

您可能知道这一点，但要在调整大小时更新模糊的背景，可以执行以下操作：

$（窗口）。调整大小（函数（）{
$（'.centered'）.blurjs({
资料来源：“正文”，
叠加：“rgba（255255,1）”，
半径：20
});
});

虽然很重，但还是要小心