Question

我想模糊div的背景。我只能找到适用于图像的解决方案作为背景，而不是HTML元素。它是移动使用所以CSS3不是问题。我把JSfiddle放在一起表明了我的困境。

我想要的结果：当下拉列表出现时，它会模糊其背后的所有元素的内容，而不是整个页面。

以下是来自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 ready wrapper

Answer 1

虽然它并不是一个模糊，但添加一个带有alpha值的白色背景就可以解决问题（background: rgba(255, 255, 255, 0.8)）。尝试使用alpha值获得最佳结果。

请参阅here和here（第二个内容背景灰色背景，以便您了解会发生什么）。

Answer 2

我相信这就是你要找的东西。我使用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();
    });
});

Answer 3

为图像创建叠加层。在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;   
}

模糊背景的div

HTML

3 个答案: