彈出窗口模糊圖像

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