我想模糊背景的div。我只能找到适用于图像作为背景的解决方案，而不是HTML元素。这是为移动使用，所以CSS3不是一个问题。我把一个 jsfield 放在一起显示我的困境。
我想要的结果:当下拉菜单出现时，它模糊了所有元素的内容，而不是整个页面。
以下是JSFiddle中HTML的示例用途:
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就绪包装器
我相信这就是你正在寻找的。我使用canvas元素。我想这将在即将发布的iOS7中变得非常流行，因为它利用了这个效果。
小提琴http://jsfiddle.net/kevinPHPkevin/TfWs3/49/
$('#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();
});
});
虽然这不是一个真正的模糊，但添加一个白色的背景与alpha值将做的技巧(background: rgba(255, 255, 255, 0.8))。用alpha值进行实验以获得最佳结果。
看这里和这里(第二个在内容上有一个灰色的背景，所以你可以看到发生了什么)。
为图片创建一个叠加。下面的CSS代码供参考
.overlay {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #A5A5A5;
display: block;
height: 231px;
opacity: 0.8;
filter: alpha(opacity = 50);
padding: 9px 0px 0 0px;
position: absolute;
top: 0;
width: 298px;
}