javascript - 在弹出窗口中模糊图像

Question

弹出窗口有什么方法不仅可以模糊文本，还可以模糊背景中的图像？我附上了一张视觉图。

Answer 1

也许blur.js可以帮助你！

留意演示。

Answer 2

这就是你要找的。CSS3 灯箱。

他们做了一个类似的弹出窗口实现，然后模糊背景。一探究竟。我相信它会对你正在做的事情有所帮助。

Answer 3

这就是stackoverflow的做法。

HTML

<div class="popup">

    <div class="blur-bg"></div>

    <div class="popup-win"><img src="foo.jpg"/></div>
</div>

CSS

    .blur-bg{
            position: absolute;
            top: 0px;
            z-index: 1000;
            opacity: 0.5;
            height: 2323px;
            left: 0px;
            width: 100%;
            background-color: black;
        }
    .popup-win{
            position: fixed;
            width: 400px;
            z-index: 1001;
            top: 50%;
            left: 50%;
            display: block;
            margin-top: -85px;
            margin-left: -215px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
            background-color: #fff;
            padding: 15px!important;
        }