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