javascript - 调整页面大小时，使用 Blur.js 作为 div 的光面背景不起作用

Question

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

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;
}

body

<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>

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

Answer 1

您的屏幕尺寸可能与图像尺寸相匹配:这只是巧合，这就是为什么您看不到 background-size: cover; 有任何问题的原因。全屏时。

blur.js 将设置 .centered 的背景div 与 正常大小 的背景图像的 base64 部分，它不会补偿调整背景图像的大小所受到的影响。与 background-size: cover;图像总是被调整大小以适应它作为背景的 div 的大小。

Is there any way to keep it still blured in any size of the screen?

它总是模糊的，所以我假设你的意思是用与下面的背景相匹配的模糊来保持它的模糊。那只能在没有 background-size: cover; 的情况下完成.

您可能知道这一点，但要在调整大小时保持模糊背景更新，您可以这样做:

$( window ).resize(function() { $('.centered').blurjs({ source: 'body', overlay: 'rgba(255,255,255,1)', radius:20 }); });

虽然它很重，但请注意。