有沒有辦法在HTML內容上實現磨砂玻璃浮動div（類IO7）

使用磨砂玻璃效果製作覆蓋div的所有方法通常只能根據圖像背景（如http://www.blurjs.com/）進行此操作。有沒有辦法在HTML內容上實現磨砂玻璃浮動div（類IO7）

我想要做的是有一個浮動div（position:fixed），這將實現毛玻璃效果超過任何內容下面，無論是圖片，文字，視頻等。

這是在所有可能使用jQuery/JavaScript/HTML/CSS的任意組合？

到目前爲止我發現的唯一的解決辦法是這樣的一個：

http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

問題與這一個是它的速度很慢，因爲它等待頁面，所以不會做它的魔力之前，首先呈現在高流量網站上確實很好。

來源

2013-10-29 Mark

看看這個帖子：http://stackoverflow.com/questions/17089927/how-to-create-a-frosted-glass-effect-using-css – bitoffdev

回答我的問題。看來這不能在這個時候以動態的方式完成。未來有可能對Chrome進行有希望的更改，但目前這一切都在開發階段。

現在，它只能僞造靜態內容。

來源

2014-01-04 19:05:40 Mark

我接過了@elliopizzaman給出的鏈接，並在一定程度上增強了提琴。通過添加一個使圖像更明亮的div層，我可以達到霜狀玻璃的外觀。邊緣不是你可能希望的，但效果是好的。

http://jsfiddle.net/mNgQs/35/

HTML：

<div id="background"> 
    <div id="frost"></div> 
</div>

CSS：

#frost { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    width: 600px; 
    height: 600px; 
    background: rgba(255,255,255,.4);  
} 

#background { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    width: 600px; 
    height: 600px; 

    background-image: url(http://placekitten.com/200/300); 

    -webkit-filter : blur(8px); 
    -moz-filter : blur(8px); 
    -ms-filter : blur(8px); 
    -o-filter : blur(8px); 
    filter  : blur(8px); 
}

我不知道，如果過濾器將被應用到一些「落後」的DIV，如果你如做了一個「可拖動」的對話框 - 因爲你可能不得不做帆布工作。

來源

2013-10-29 02:16:43 PaulProgrammer

+1爲小貓:) – jasonscript

這只是模糊預設圖像，但這不適用於嘗試將浮動div放在混合文本，圖像，視頻內容的頂部 – Mark

我認爲，因爲您必須執行一些畫布工作來捕捉div後面的圖像並對其進行處理。祝你好運，特別是在視頻上。 – PaulProgrammer

這是你想要的嗎？檢查 http://jsfiddle.net/mNgQs/36/ 改變後，到div的

-webkit-filter : blur(2px); 
-moz-filter : blur(2px); 
-ms-filter : blur(2px); 
-o-filter : blur(2px); 
filter  : blur(2px);

來源

2013-10-29 02:42:36 Tejas

有沒有辦法在HTML內容上實現磨砂玻璃浮動div（類IO7）

回答

相關問題