Question

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

参见http://jsfiddle.net/jRsjK/6867/上的示例在哪里我尝试了（错误的）行

body '-webkit-filter' : 'blur(15px)'

Answer 1

我猜你的意思是这样的。 JSFIDDLE

<强>的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)。

Answer 2

请参阅此fiddle

只需将类模糊添加到叠加层之外的所有元素，然后在CSS中添加模糊滤镜，那么您需要为Firefox添加一个附加SVG模糊。

的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);
    filter:url(#blur-effect-2);
}

HTML（这是Firefox需要的）

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

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

Answer 3

你可以添加一些包装来添加像这样的过滤器

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

js然后在afterload上设置过滤器并在afterclose

上删除它

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

http://jsfiddle.net/jRsjK/6870/

Answer 4

我遇到了同样的问题，模糊功能已经在fancybox功能中，但是如果你没有看到模糊，那么可能是因为你的CSS文件夹中没有fancybox_overlay.png。

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

Answer 5

DEMO

它已经存在于fancybox中

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

将CSS模糊添加到fancyBox 2背景中

5 个答案:

DEMO