在<div>元素</div>下面模糊

Question

我有以下问题。我有一个元素，并希望模糊它的一部分。下面给出一个例子，其中主背景是一个元素

简而言之，我想模糊具有模糊过滤器的<div>下方的内容。

我已经检查并找到了如何使用CSS：before选择器为图像（http://jsfiddle.net/ezaLot4d/）执行此操作。但是，在我的情况下，它没有价值，因为我的元素是一个视频，因此bluring应该连续发生，而不仅仅是在呈现页面时。

有什么想法吗？

由于

Answer 1

查看BlurJS，这是一个模糊某些东西的JavaScript库。 http://blurjs.com/

您可以像这样使用它：

$('.target').blurjs(options);

我在这里包含了默认选项：

{
    source: 'body',         //Background to blur
    radius: 5,          //Blur Radius
    overlay: '',            //Overlay Color, follow CSS3's rgba() syntax
    offset: {           //Pixel offset of background-position
        x: 0,
        y: 0
    },
    optClass: '',           //Class to add to all affected elements
    cache: false,           //If set to true, blurred image will be cached and used in the future. If image is in cache already, it will be used.
    cacheKeyPrefix: 'blurjs-',  //Prefix to the keyname in the localStorage object
    draggable: false        //Only used if jQuery UI is present. Will change background-position to fixed
}