-webkit-和Firefox Working Example，現(xiàn)在可調(diào)整大小/流暢。
JS
$(document).ready(function () {
frost = function () {
var w = $('#main-view').width();
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
$('canvas').wrap('<div id="contain" />');
},
width: w,
height: 30
});
$('canvas, #partial-overlay, #cover').hide();
$('#cover').fadeIn('slow', function () {
$('#partial-overlay').fadeIn('slow');
});
};
$('body').append('<div id="cover"></div><svg id="svg-image-blur"><filter id="blur-effect-1"><feGaussianBlur stdDeviation="2"/></filter></svg>');
$('#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
<div id="main-view">
<div style="width: 10%; height: 20%; background: #f00; float: left"></div>To my left is a red box
<br>Now there is just text
<br>Text that goes on for a few pixels
<br>or even more</div>
<div id="partial-overlay">Here is some content</div>
我將其放在click函數(shù)中，因?yàn)槲艺J(rèn)為這將是最可能的用例。在準(zhǔn)備好文檔時(shí)，它將同樣有效。
盡管畫布表示不會(huì)是完美的像素，但我認(rèn)為在大多數(shù)情況下它并不重要，因?yàn)槠淠：恕?/p>
更新：根據(jù)要求，現(xiàn)在可以調(diào)整大小。我還將Cover div移到了JS中，并為Firefox添加了一個(gè)svg后備。調(diào)整大小要求在每次調(diào)整大小時(shí)都重新繪制畫布，因此我將其設(shè)置為在調(diào)整大小時(shí)隱藏畫布，覆蓋圖等，然后在調(diào)整大小停止時(shí)替換畫布。
