彈出窗口模糊圖像

有沒有什麼方法可以彈出來不僅模糊文字，而且背景中的圖像？我附加了一個視覺。 enter image description here 彈出窗口模糊圖像

2012-06-14 THEDert

也許這個問題可以幫助你？ - > http://stackoverflow.com/questions/371209/full-page-blur-in-css 雖然它相當過時。有新的（開發？） - 可用於模糊效果的css過濾器 - Chrome版本（前綴爲-webkit-） – GNi33

也許blur.js可以幫助你！

瞭解demo。

來源

2012-06-14 17:53:23

謝謝！ – THEDert

歡迎:) –

哇，看看標記，這個base64編碼的背景是瘋狂的。但這是一個很好的發現，+1 :) – GNi33

這就是你要找的。 CSS3 Lightbox。

他們做了一個類似的彈出窗口然後模糊背景。一探究竟。我相信它會幫助你在做什麼。

來源

2012-06-15 04:41:49 Aniket

這是如何使用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; 
     }

來源

2013-03-15 10:47:12 Sorter

彈出窗口模糊圖像

回答

相關問題