實時更新磨砂玻璃UI jQuery

我需要一個磨砂玻璃UI效果，它基本上是一個透明的白色div覆蓋一些內容。 div下面的部分內容應該模糊。效果應該是這個樣子： http://codepen.io/Matori/pen/JFzok 實時更新磨砂玻璃UI jQuery

random code because StackOverflow forced me to add it

的問題是，我沒有使用任何背景圖片。我的應用程序是一個繪圖工具，用戶可以在其中繪製形狀和文本。因此，磨砂玻璃div覆蓋的區域將每秒更新一次。

我試過this html5 Canvas plugin但我無法正常工作。無論如何，它足夠嗎？或者它只是在頁面加載時拍攝我的body元素的快照？

來源

2014-07-27 colmtuite

這裏有一個方法來達到這個效果。

應用快速模糊（馬里奧·克林格曼），以你的形象，
覆蓋了「霜」，由25％的不透明度白色矩形制造。

模糊腳本是在這裏：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

enter image description here

示例代碼和演示：http://jsfiddle.net/m1erickson/PA9NC/

var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 

    var img = new Image(); 
    img.crossOrigin = "anonymous"; 
    img.onload = start; 
    img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/Dog-With-Cute-Cat.jpg"; 

    function start() { 
     canvas.width = img.width; 
     canvas.height = img.height; 

     // draw the image 

     ctx.drawImage(img, 0, 0); 

     // blur the image with blur radius=10 

     stackBlurCanvasRGB("canvas", 0, img.height/2+30, img.width, img.height/2, 10); 

     // draw a white rectangle at 25% opacity 

     ctx.globalAlpha = 0.25; 
     ctx.fillStyle = "white"; 
     ctx.fillRect(0, img.height/2+30, img.width, img.height/2); 

     // draw some text at 40% opacity 

     ctx.globalAlpha = 0.40; 
     ctx.font = "102px arial"; 
     ctx.fillText("Us", 225, 275); 
    }

來源

2014-07-27 07:15:43 markE

我在疑問，我沒有任何圖像提及。我的網絡應用程序中沒有任何圖像。我需要使用網站內容（div，文本，輸入按鈕等），這將每秒實時更新。例如，假設Facebook想給他們的藍色標題欄添加磨砂玻璃效果。所以當標題滾動頁面內容（實時更新）時，內容可以在欄下看到模糊。他們會怎麼做？ – colmtuite

哎唷！你說過：「我的應用程序是一個繪圖工具，用戶可以繪製形狀和文字......用毛玻璃覆蓋」，並且包含「畫布」標籤，所以我假設你可以控制下面的內容。否則，您可能必須降級以將固定的半透明白色圖像覆蓋在您的內容上。如果您不控制內容，則無法實現模糊效果。 – markE

雖然固定的透明圖像與透明的白色背景顏色沒有區別，對吧？我認爲有可能每秒拍攝一次文檔的快照，然後將其用作圖像或其他東西？ – colmtuite

實時更新磨砂玻璃UI jQuery

回答

相關問題