html5磨砂效果,如何使用CSS（和JavaScript？）创建模糊的“磨砂”背景？

-webkit-和Firefox Working Example，现在可调整大小/流畅。

JS

$(document).ready(function () {

frost = function () {

var w = $('#main-view').width();

html2canvas(document.body, {

onrendered: function (canvas) {

document.body.appendChild(canvas);

$('canvas').wrap('

},

width: w,

height: 30

});

$('canvas, #partial-overlay, #cover').hide();

$('#cover').fadeIn('slow', function () {

$('#partial-overlay').fadeIn('slow');

});

};

$('body').append('

');

$('#main-view').click(function () {

frost();

$('#partial-overlay').addClass('vis');

$(window).resize(function () {

$('canvas, #partial-overlay, #cover').hide();

});

function onResize() {

if ($('#partial-overlay').hasClass('vis')) {

frost();

}

}

var timer;

$(window).bind('resize', function () {

timer && clearTimeout(timer);

timer = setTimeout(onResize, 50);

});

});

$('#partial-overlay').click(function () {

$('#partial-overlay').removeClass('vis');

$('canvas, #partial-overlay, #cover').hide();

});

});

的CSS

#main-view {

width:75%;

height:50%;

box-sizing: border-box;

margin:8px;

}

#partial-overlay {

display:none;

width: 100%;

height: 20px;

position: absolute;

top: 0;

left: 0;

z-index:99;

background: rgba(255, 255, 255, 0.2);

cursor:pointer;

}

canvas {

position: absolute;

top: 0;

left: 0;

-webkit-filter:blur(5px);

filter: url(#blur-effect-1);

}

#cover {

display:none;

height:19px;

width:100%;

background:#fff;

top:0;

left:0;

position:absolute;

}

#contain {

height:20px;

width:100%;

overflow:hidden;

position:absolute;

top:0;

left:0;

}

svg {

height:0;

width:0;

}

的HTML

Now there is just text

Text that goes on for a few pixels

or even more

Here is some content

我将其放在click函数中，因为我认为这将是最可能的用例。在准备好文档时，它将同样有效。

尽管画布表示不会是完美的像素，但我认为在大多数情况下它并不重要，因为其模糊了。

更新：根据要求，现在可以调整大小。我还将Cover div移到了JS中，并为Firefox添加了一个svg后备。调整大小要求在每次调整大小时都重新绘制画布，因此我将其设置为在调整大小时隐藏画布，覆盖图等，然后在调整大小停止时替换画布。