我想模糊a的背景div。我只能找到适用于图像作为背景的解决方案，而不是 HTML 元素。它适用于移动设备，因此 CSS3 不是问题。我已经把一个JSfiddle放在一起显示我的困境。
我想要的结果：当下拉菜单出现时，它会模糊其后面所有元素的内容，而不是整个页面。
这是HTML来自 JSFiddle 的示例目的：
HTML
<a href="#" id="link">open/close</a>
<div id="slide">
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
</div>
<div id="page_content">
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
</div>
编辑：13:00 18/06/2013
我试图让“接受的答案”工作，但由于某种原因，从 JSfiddle 提取时它不起作用
这是我的代码：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$( document ).ready(function() {
$('#link').click(function() {
$('#slide').slideToggle('slow', function() {
});
});
$('#main-view').click(function(){
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 100
});
$('#cover').slideToggle('fast', function(){
$('#partial-overlay').slideToggle();
});
});
});
</script>
<style>
#link {
z-index: 1000;
position: absolute;
top:0;
left:0;
}
#partial-overlay {
padding-top: 20px;
display:none;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index:99;
}
canvas{
height: 100px;
position: fixed;
top: 0;
left: 0;
-webkit-filter:blur(2px);
}
#cover{
display:none;
height:99px;
width:100%;
background:#fff;
position:fixed;
top:0;
left:0;
}
#main-view {
width:300px;
}
</style>
</head>
<body>
<div id="main-view">
<a href="#" id="link">open/clode</a>
Page content, not images Page content, not images Page content, not images page_content Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content,
</div>
<div id="cover"></div>
<div id="partial-overlay">
<p>Some content here</p>
<p>Some content here</p>
</div>
</body>
</html>
我尝试过使用和不使用 DOM 就绪包装器