Jquery 将CSS模糊添加到fancyBox2背景

如何在Fancybox2中单击的图像下方的整个页面上添加css模糊？ 我指的是黑暗透明背景上的模糊，而不是点击图像本身

参见上的示例 我试了（错误的）线路

它已经在fancybox里了

$(".fancybox").fancybox();

---

我猜你的意思是这样的

jQuery

$(".fancybox").fancybox({
    beforeShow: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").addClass("blur");
    },
    afterClose: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").removeClass("blur");
    }
});

CSS

.blur {
    -webkit-filter: blur(5px)
}

---

正如Martin Kovachev在评论中指出的，这可能会占用CPU大量资源，并导致一些延迟和/或奇怪的性能问题。因此，添加硬件加速可能很有用。在添加3D层但未实际使用的情况下，通常使用3D仿真技术，例如，通过设置

translateZ（0）

或

translate3D（0,0,0）

，可以添加一些包装器来添加如下过滤器

<div id="wrapper">
    <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

    <a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
</div>    

看到这个了吗

只需将类blur添加到覆盖之外的所有元素中，并在CSS中添加一个blur过滤器，那么您就需要为Firefox添加一个额外的SVG blur

jQuery

$(".fancybox").fancybox({
    beforeShow: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").addClass("blur");
    },
    afterClose: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").removeClass("blur");
    }
});

CSS

HTML（这是Firefox需要的）

---

我也遇到了同样的问题，模糊已经存在于fancybox函数中，但是如果您没有看到模糊，那么可能是因为您的CSS文件夹中没有

fancybox\u overlay.png

---

这是一个常见的错误，因为下载zip文件夹后，我们只提取CSS和JS，而忽略了zip文件夹中的其他图像。转到检查元素，您可以看到它将显示

fancybox\u overlay.png

缺失。

如果有帮助，请将答案标记为正确。太棒了！正是我需要的！有一件事——在更大的分辨率上，性能非常糟糕。通过简单地添加：-webkit transform:translate3d（0,0,0），可以强制硬件加速；after-webkit过滤器：@MartinKovachev，谢谢你。问题是如何添加模糊效果，而不是如何使用fancybox。在您的示例中没有模糊效果。

$(".fancybox").fancybox({
    afterLoad:function(){
        $("#wrapper").css('-webkit-filter','blur(15px)');
    },
    afterClose:function(){
        $("#wrapper").css('-webkit-filter','');
    }
});    

$(".fancybox").fancybox({
    beforeShow: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").addClass("blur");
    },
    afterClose: function () {
        $("body *:not(.fancybox-overlay, .fancybox-overlay *)").removeClass("blur");
    }
});

.blur {
    -webkit-filter: blur(5px);
    filter:url(#blur-effect-2);
}

<svg id="svg-image-blur">

    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="5" />
    </filter>
</svg>