Desenfoque de fondo de un div

Quiero difuminar el fondo de un div . Solo puedo encontrar soluciones que se aplican a las imágenes como fondo, no como elementos HTML. Es para uso móvil, por lo que CSS3 no es un problema. He juntado un JSfiddle mostrando mi dilema.

Mi resultado deseado: cuando aparece el menú desplegable, difumina el contenido de todos los elementos directamente detrás de él , no de toda la página.

Aquí está el HTML a modo de ejemplo de JSFiddle:

HTML

 open/close 

Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text

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

EDITADO: 13: 00 18/06/2013

Intenté que funcionara la “respuesta aceptada” pero, por alguna razón, no funciona cuando se extrae de JSfiddle

Aquí está mi código:

      $( 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(); }); }); });   #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; }    
open/clode 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,

Some content here

Some content here

Lo he intentado con y sin el envoltorio DOM listo

Creo que esto es lo que estás buscando. Yo uso el elemento canvas Sospecho que esto se hará muy popular con el nuevo lanzamiento pendiente de iOS7 que hace uso de este efecto.

violín 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(); }); }); 

Aunque no es realmente un desenfoque, pero agregar un fondo blanco con un valor alfa hará el truco ( background: rgba(255, 255, 255, 0.8) ). Experimenta con el valor alfa para obtener los mejores resultados.

Vea aquí y aquí (el segundo tiene un fondo grisáceo sobre el contenido para que pueda ver lo que sucede).

Crea una superposición para la imagen. bajo el código css es para referencia

 .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; }