2016-06-11 11 views
4

Die Frage ist also: Ich möchte den Hintergrund sichtbar machen, aber unscharf, wenn ein Popup geöffnet wird. Ich frage nicht nach Bildunschärfe, ich frage nach Hinzufügen von Unschärfe auf der Seite, und ich möchte wissen, ob es derzeit keine CSS-Lösung gibt?Gibt es eine CSS-only Möglichkeit, Hintergrundunschärfe in IE11 zu tun?

Es gibt andere Fragen ähnlich dieser jedoch einige von ihnen fragen nach irgendeiner Lösung einschließlich Javascript-Lösung, während andere für Bildunschärfe und nicht Hintergrundunschärfe suchen und andere sind sehr alt, also vielleicht gibt es einige neue css-only-Lösung mit neuen Browsern Eigenschaften.

Keine der anderen Fragen in Stackoverflow haben eine css-only-Lösung für ie11 auf die Frage, die ich stelle. einfügen https://github.com/niklasvh/html2canvas und dann:

Die nicht-CSS-Lösungen, die ich kenne, sind:

  1. Die Lösung, die Javascript wie http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html verwenden Bibliotheken verwendet
  2. Um ein Bild des Hintergrunds mit Bibliotheken wie html2canvas zu erstellen das Bild in einem Inline-Svg und wenden Sie Svg-Filter-Unschärfe darauf an.

Ich habe überprüft und verifiziert, dass keine der folgenden Arbeiten in IE11:

filter: blur(7px); 
-webkit-filter: blur(7px); 
filter: url(/images/blur.svg#blur); 
filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='7'%20/></filter></svg>#blur"); 
-moz-filter: blur(7px); 
-o-filter: blur(7px); 
-ms-filter: blur(7px); 
/* This only works for older IE. For newer IE using javascript is suggested here: http://thenewcode.com/534/Crossbrowser-Image-Blur-with-CSS */ 
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='7'); 

Es wird sehr schön sein, eine offizielle Antwort von jemandem, von Microsoft zu bekommen, dass dies nicht möglich ist, wenn das der ist Fall.

+0

um die Seite zu verwischen, aber ein Element bedeutet, den Seiteninhalt in einen gemeinsamen Wrapper zu setzen, den Sie weichzeichnen, und dieses andere Element ist ein Geschwister, aber ein Kind. Für ältere IE-Filter mit dem richtigen Präfix funktioniert IE5t o 9 –

+0

@GCyrillus Ich weiß, dass und das ist, was ich mit dem oben genannten Code, der für alle Browser außer IE11 funktioniert und deshalb habe ich diese stackoverflow Frage gestellt. Ich brauche eine Möglichkeit, um Unschärfe zu diesem gemeinsamen Wrapper hinzufügen, über die Sie in IE11 arbeiten, und ich bevorzuge eine CSS-Lösung. –

+0

@GuyL. Hast du eine Lösung dafür gefunden? – swenedo

Antwort