在弹出窗口上模糊图像

Question

弹出窗口是否有任何方法可以模糊文本，而不是背景中的图像？我附上了一个视觉效果。

Answer 1

也许blur.js可以帮助你!!

了解demo。

Answer 2

这就是你要找的东西。 CSS3 Lightbox

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

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