整個網頁上的模糊效果

Question

我想讓我的網站上的未註冊用戶看到整個網頁的模糊效果。

如何使用css創建此模糊效果？

Answer 1

這裏的一些結果，如果通過模糊你的意思是模糊：

這傢伙使用圖像平移和不透明技術康寶，我知道你的用戶正在尋找一個模糊的網站，但如果沒有簡單的解決方法那麼也許把你雷戈網頁的快照，並覆蓋在圖像，然後它可能會做：

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

如果你想嘗試複製您的雷戈頁，因爲它可能是一個）殘疾人和b）最小，日也許你甚至可以在使用上述圖像技術並將其應用於節點集時使用bash，如果zoom也可以幫助您，那麼使用CSS positioning和opacity來抵消副本 - idk。即使你的頁面足夠小，這顯然需要Javascript來複制節點，除非你的後端可以做這個節點的重複。只是一個想法，真的。這裏是一個非常可怕的，很簡單的例子：

http://jsfiddle.net/9qnsz/2/

這SO帖列出了一些限制，並用高斯模糊的困難時，無法與圖像做的，有一些有趣的鏈接：

Gaussian Blur onHover Using jQuery

---

編輯：根據要求，的jsfiddle的內容：

<div class="container"> 
    <div class="overlay"> 
     <p>Please register etc etc...</p> 
    </div> 

    <form action="javascript:;" class="form0"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form1"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form2"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form3"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 
    <form action="javascript:;" class="form4"> 
     <input type="text" value="Username" /> 
     <input type="text" value="Password" /> 
     <button>Submit</button> 
    </form> 

</div>​ 


.container { 
    width:500px; 
    height:500px; 
    position:relative; 
    border:1px solid #CCC; 
} 
    form { 
     position:absolute; 
     left:10px; 
     top:10px; 
    } 
    form.form0 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
    } 
    form.form1 { 
     left:8px; 
     top:8px; 
     opacity:0.1; 
     zoom:1.02; 
    } 
    form.form2 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
     zoom:1.01; 
    } 
    form.form3 { 
     left:9px; 
     top:9px; 
     opacity:0.2; 
    } 
    form.form4 { 
     left:11px; 
     top:11px; 
     opacity:0.1; 
    } 

    .overlay { 
     width:250px; 
     height:250px; 
     margin-top:50px; 
     margin-left:auto; 
     margin-right:auto; 
     border:1px solid #666; 
    } 

Answer 2

您可以將設置爲100％寬度和高度的固定div添加到您的body。這將填滿屏幕，並且您可以在其上放置半透明背景或使用CSS3創建您要查找的效果。

Answer 3

用id="body_bag"創建一個新的div標記，並將該網站的其餘部分編輯在div之內，並使用以下css來給出模糊效果。

#body_bag { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: #000; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); /* required for opacity to work in IE */ 
} 

Answer 4

編輯（2015）：filter css屬性正在形成tantalisingly complete coverage。這使您可以編寫像body { filter: blur(10px); }這樣的規則，使整個頁面變得模糊。

---

從我可以告訴，有模糊的元素沒有跨瀏覽器的方式，即使在HTML5，CSS3等這個「現代」 ......

沒有爲IE瀏覽器blur filter （和只有 IE）。一個svg blur filter也可以是applied to an html element，但從我可以告訴，它只適用於Firefox。

如果您對瀏覽器特定的黑客感到高興，請繼續，但如果您需要該效果在所有瀏覽器上運行，那麼您將失去運氣。

如果只是要模糊的文字，你可以用一個巧妙的文字陰影招：，無論是覆蓋透明

.blurry { 
    color: transparent; 
    text-shadow: 0 0 3px black; /* set to colour you want */ 
} 

也有辦法來模糊圖像，移動圖像的副本，或通過processing the data with javascript。

也許你可以拼湊這些技術，它會達到你想要的。

但是，現在令人遺憾的是，現在的廣泛答案是：沒有簡單，全面的方式來模糊HTML中的內容。

（我以爲我們活在未來，人是什麼給了？！？）

附錄：希望就在眼前。在寫這篇文章的時候，一些webkit每晚（「最先進的」）構建正在實現一些新的css filter specification。這個演示在我安裝的任何webkit瀏覽器上都不起作用，所以它還遠沒有成爲主流。

Answer 5

嘗試......

body { 
    filter:blur(3px); 
} 

你需要添加-moz-，-webkit-前綴（或使用像PrefixFree）