it-swarm.com.de

Hintergrundunschärfe mit CSS

Ich möchte einen Vista/7-Aero-Glass-Effekt in einem Popup auf meiner Site, der dynamisch sein muss. Ich bin damit einverstanden, dass dies kein browserübergreifender Effekt ist, solange die Site auf allen modernen Browsern noch funktioniert .

Mein erster Versuch war, so etwas zu benutzen

#dialog_base {
  background:white;
  background:rgba(255,255,255,0.8);

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

Wie zu erwarten war, war jedoch dies führte dazu, dass der Inhalt des Dialogfelds unscharf wurde und der Hintergrund klar blieb. Gibt es eine Möglichkeit, mit CSS den Hintergrund eines semitransparenten Elements anstelle seines Inhalts zu verwischen?

45
Supuhstar

OKT. 2016 UPDATE

Da die -moz-element() -Eigenschaft von anderen Browsern als FF nicht allgemein unterstützt wird, ist es noch einfacher, Unschärfen anzuwenden, ohne den Inhalt des Containers zu beeinträchtigen. Die Verwendung von Pseudoelementen ist in diesem Fall in Kombination mit einem SVG-Weichzeichnungsfilter ideal.

Überprüfen Sie die Demo mit einem Pseudo-Element

(Demo wurde in FF v49 getestet, Chrome v53, Opera 40 - IE doesn scheint Unschärfe weder mit CSS- noch mit SVG-Filter zu unterstützen)


Die einzige Möglichkeit (bisher), im Hintergrund einen Weichzeichnungseffekt ohne js-Plugins zu erzielen, ist die Verwendung der Eigenschaft -moz-element() in Kombination mit dem Weichzeichnungsfilter svg. Mit -moz-element() können Sie ein Element als Hintergrundbild eines anderen Elements definieren. Dann wenden Sie den Unschärfefilter svg an. OPTIONAL: Sie können jQuery zum Scrollen verwenden, wenn sich Ihr Hintergrund an der Position fixed befindet.

Sehen Sie meine Demo hier

Ich verstehe, dass es eine ziemlich komplizierte Lösung ist und auf FF beschränkt ist (element() gilt momentan nur für Mozilla mit -moz-element() -Eigenschaft), aber zumindest gab es einige Anstrengungen = in der Vergangenheit in Webkit-Browsern implementiert und hoffentlich wird es implementiert in der Zukunft .

34
otinanai

Sie können ein Pseudoelement verwenden, um den Hintergrund des Inhalts mit demselben Bild wie der Hintergrund zu positionieren, jedoch mit dem neuen CSS3-Filter unscharf.

Sie können es hier in Aktion sehen: http://codepen.io/jiserra/pen/JzKpx

Das habe ich zum Anpassen einer Auswahl gemacht, aber ich habe den Hintergrundunschärfe-Effekt hinzugefügt.

17

Seit Safari 9.0 können Sie die Hintergrundfiltereigenschaft verwenden.

[~ # ~] html [~ # ~]

<div>backdrop blur</div>

[~ # ~] CSS [~ # ~]

div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

oder wenn Sie eine andere Hintergrundfarbe für Browser ohne Unterstützung benötigen:

div {
    background-color: rgba(255, 255, 255, 0.9);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    div {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);  
    }
}

JSFiddle

Mozilla Developer: Hintergrundfilter

CanIUse

17
hovado

Es gibt eine einfache und sehr verbreitete Technik, bei der 2 Hintergrundbilder verwendet werden: ein gestochen scharfer und ein verschwommener. Sie legen das gestochen scharfe Bild als Hintergrund für den Körper und das verschwommene als Hintergrundbild für Ihren Container fest. Das verschwommene Bild muss fest positioniert sein und die Ausrichtung ist zu 100% perfekt. Ich habe es vorher benutzt und es funktioniert.

body {
    background: url(yourCrispImage.jpg) no-repeat;
}

#container {
    background: url(yourBlurryImage.jpg) no-repeat fixed;
}

Sie können ein funktionierendes Beispiel auf der folgenden Seite sehen: http://jsfiddle.net/jTUjT/5/. Versuchen Sie, die Größe des Browsers zu ändern, und stellen Sie sicher, dass die Ausrichtung niemals fehlschlägt.


Wenn nur CSS element() von anderen Browsern als Mozillas -moz-element() unterstützt würde, könnten Sie großartige Effekte erzielen. Sehen Sie diese Demo mit Mozilla .

8
otinanai

Verwenden Sie ein leeres Element in der Größe des Inhalts als Hintergrund und positionieren Sie den Inhalt über dem unscharfen Element.

#dialog_base{
  background:white;
  background:rgba(255,255,255,0.8);

  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 50;
  margin-left: -200px;
  height: 200px;
  width: 400px;

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

#dialog_content{
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left -200px;
  overflow: hidden;
  z-index: 51;
}

Das Hintergrundelement kann sich innerhalb des Inhaltselements befinden, nicht jedoch umgekehrt.

<div id='dialog_base'></div>
<div id='dialog_content'>
    Some Content
    <!-- Alternatively with z-index: <div id='dialog_base'></div> -->
</div>

Dies ist nicht einfach, wenn der Inhalt nicht immer eine einheitliche Größe hat, aber es funktioniert.

1
Devon

Du könntest es durch iframes schaffen ... Ich habe etwas gemacht, aber mein einziges Problem ist, diese divs zum gleichzeitigen Scrollen zu synchronisieren ... es ist schrecklich, weil es so ist, als ob du 2 Websites lädst, aber der einzige Weg, den ich gefunden habe ... du könntest auch mit divs und overflow arbeiten, denke ich ...

1
Danton Heuer

Auf welche Weise möchten Sie es dynamisch gestalten? Wenn das Popup erfolgreich dem Hintergrund zugeordnet werden soll, müssen Sie zwei Hintergründe erstellen. Es erfordert sowohl die Verwendung von element() oder -moz-element() als auch eines Filters (für Firefox verwenden Sie einen SVG-Filter wie filter: url(#svgBlur), da Firefox -moz-filter: blur() noch nicht unterstützt ?). Es funktioniert nur in Firefox zum Zeitpunkt des Schreibens.

Siehe Demo hier.

Ich muss noch eine einfache Demo erstellen, um zu zeigen, wie es gemacht wird. Gerne können Sie die Quelle anzeigen.

1
Alan Gresley