我试图创建一个iOS 7风格磨砂的外观与HTML5，CSS3和JavaScript，可以在webkit浏览器上工作。
技术上，给定以下HTML：
<style>
#partial-overlay {
width: 100%;
height: 20px;
background: rgba(255,255,.2); /* TODO frost */
position: fixed;
top: 0;
left: 0;
}
</style>
<div id="main-view">
<div style="width: 50px; height: 50px; background: #f00"></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>
我想对#main-view应用类似-webkit-filter：blur(5px)水平的第一个20px。
如果CSS被修改为#partial-overlay {width：20px;高度：100％; …}然后我需要应用-webkit-filter：blur(5px)垂直的第一个20px。
明显的解决方案是使用javascript来克隆#main-view，设置overflow：hidden，然后适当地更改宽度/高度，但是似乎在我看来很难推广到更复杂的页面/ CSS结构。
编辑：这里是我想要实现的一个例子：
解决方法
感谢的灵感…它导致我这个
canvas plugin这是把戏
新的和改进：-webkit- and 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('<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,#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,#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,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>
我把它放在一个点击功能，因为我认为这将是最可能的用例。它将在文档准备好工作。
虽然画布表示不会像素完美，我不认为它在大多数情况下真的很重要，因为它的模糊。
更新：根据要求现在可以调整大小。我也把cover div移动到JS中，并为Firefox添加了一个svg。调整大小需要在每次调整大小时重新绘制画布，因此在调整大小时将其设置为隐藏画布，叠加层等，然后在调整大小时将其替换。
