Hintergrund eines div verschwommen machen

Question

Ich möchte den Hintergrund eines div verwischen. Ich finde nur Lösungen, die für Bilder als Hintergrund gelten, nicht für HTML-Elemente. Es ist für die mobile Nutzung, also ist CSS3 kein Problem. Ich habe ein JSfiddle erstellt, das mein Dilemma zeigt.

Mein gewünschtes Ergebnis: Wenn das Dropdown-Menü angezeigt wird, soll der Inhalt aller Elemente direkt dahinter verwischt werden, nicht die gesamte Seite.

Hier ist der HTML-Code zum Beispiel aus dem JSFiddle:

HTML

öffnen/schließen

    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 

    Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder 
     Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder 
     Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder 
     Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder 

EDITIERUNG: 13:00 Uhr am 18.06.2013

Ich habe versucht, die "akzeptierte Antwort" zum Laufen zu bringen, aber aus irgendeinem Grund funktioniert es nicht, wenn sie aus dem JSFiddle extrahiert wird.

Hier ist mein Code:

$( 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;   
}

    öffnen/schließen
  Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder
   Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder
   Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder
   Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder Seiteninhalt, keine Bilder

    Einige Inhalte hier
    Einige Inhalte hier

Ich habe es mit und ohne den DOM-Ready-Wrapper versucht

Answer 1

Auch wenn es nicht wirklich unscharf ist, wird das Hinzufügen eines weißen Hintergrunds mit einem Alphawert den gewünschten Effekt erzielen (background: rgba(255, 255, 255, 0.8)). Experimentieren Sie mit dem Alphawert für die besten Ergebnisse.

Siehe hier und hier (der zweite hat einen grauen Hintergrund im Inhalt, so dass Sie sehen können, was passiert).

Answer 2

Ich glaube, das ist wonach du suchst. Ich benutze das canvas Element. Ich vermute, dass dies mit dem bevorstehenden Release von iOS7, das diese Effekte verwendet, sehr beliebt werden wird.

fiddle 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

Erstellen Sie ein Overlay für das Bild. Der CSS-Code unten dient als Referenz

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