Wie kann ich einen CSS-Glas- / Unschärfeeffekt für eine Überlagerung verwenden?

Ich habe Probleme beim Anwenden eines Unschärfeeffekts auf ein halbtransparentes Overlay-Div. Ich möchte, dass alles hinter dem Div so verwischt wird:

Hier ist eine jsfiddle, die nicht funktioniert: http://jsfiddle.net/u2y2091z/

Irgendwelche Ideen, wie das funktioniert? Ich möchte dies so unkompliziert wie möglich halten und es browserübergreifend gestalten. Hier ist das CSS, das ich verwende:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

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

Hier ist ein Beispiel, das svgFilter verwendet.

Die Idee ist, ein svgElement mit dem heightgleichen wie das zu verwenden #overlayund den feGaussianblurFilter darauf anzuwenden . Dieser Filter wird auf ein svg imageElement angewendet . Um einen extrudierten Effekt zu erzielen, können Sie ein box-shadowam unteren Rand des Overlays verwenden.

Browser-Unterstützung für svgFilter .

Demo on Codepen

body {
  background: #222222;
}
#container {
  position: relative;
  width: 450px;
  margin: 0 auto;
}
img {
  height: 300px;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  color: rgba(130, 130, 130, 0.5);
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

<div id="container">
  <img src="http://lorempixel.com/450/300/sports" />
  <div id="overlay">WET</div>
  <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
    </defs>
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
  </svg>
</div>

Für eine einfachere und aktuellere Antwort:

backdrop-filter: blur(6px);

Beachten Sie, dass die Browserunterstützung nicht perfekt ist, aber in den meisten Fällen ist eine Unschärfe nicht unbedingt erforderlich.

Ich konnte Informationen von allen hier zusammenstellen und weiter googeln, und ich habe Folgendes gefunden, das in Chrome und Firefox funktioniert: http://jsfiddle.net/xtbmpcsu/ . Ich arbeite immer noch daran, dass dies für IE und Opera funktioniert.

Der Schlüssel ist, den Inhalt in das Div zu setzen, auf das der Filter angewendet wird:

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

Und dann das CSS:

body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
}
img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    position: absolute;
    left: 100px;
    top: 100px;
    height: 300px;
    width: auto;
}

Die Maske hat also die Filter angewendet. Beachten Sie auch die Verwendung von url () für einen Filter mit einem <svg>Tag für den Wert - diese Idee stammt von http://codepen.io/AmeliaBR/pen/xGuBr . Wenn Sie Ihr CSS minimieren, müssen Sie möglicherweise Leerzeichen im SVG-Filter-Markup durch "% 20" ersetzen.

Jetzt ist alles im Maskendiv verschwommen.

Wenn Sie sich für einen zuverlässigen Cross-Browser - Ansatz suchen heute , werden Sie nicht ein große Liebe kennen lernen. Die beste Option besteht darin, zwei Bilder zu erstellen (dies kann in einigen Umgebungen automatisiert werden) und sie so anzuordnen, dass eines das andere überlagert. Ich habe unten ein einfaches Beispiel erstellt:

<figure class="js">
    <img src="http://i.imgur.com/3oenmve.png" />
    <img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
    position: relative;
    width: 250px; height: 250px;
}

figure.js .blur {
    top: 0; left: 0;
    position: absolute;
    clip: rect( 0, 250px, 125px, 0 );
}

Auch wenn dieser Ansatz effektiv ist, ist er nicht unbedingt ideal. Davon abgesehen liefert es das gewünschte Ergebnis .

Hier ist eine mögliche Lösung.

HTML

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />

<div id="crop">
    <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

CSS

#crop {
    overflow: hidden;

    position: absolute;
    left: 100px;
    top: 100px;

    width: 450px;
    height: 150px;
}

#overlay {
    -webkit-filter:blur(4px);
    filter:blur(4px);

    width: 450px;
}

#source {
    height: 300px;
    width: auto;
    position: absolute;
    left: 100px;
    top: 100px;
}

Ich weiß, dass das CSS vereinfacht werden kann und Sie wahrscheinlich die IDs loswerden sollten. Die Idee hier ist, ein div als Zuschneidebehälter zu verwenden und dann Unschärfe auf Duplikate des Bildes anzuwenden. Geige

Damit dies in Firefox funktioniert, müssten Sie den SVG-Hack verwenden .

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

Anstatt Ihrem Inhalt einen weiteren unscharfen Hintergrund hinzuzufügen, können Sie den Hintergrundfilter verwenden . FYI IE 11 und Firefox unterstützen dies möglicherweise nicht. Überprüfen Sie caniuse .

Demo:

header {
  position: fixed;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
}
body {
  margin: 0;
}

<header>
  Header
</header>
<div>
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
</div>

Ich habe diese Lösung gefunden.

Klicken Sie hier, um das Bild des verschwommenen Effekts anzuzeigen

Es ist eine Art Trick, bei dem ein absolut positioniertes untergeordnetes Element verwendet wird, das divHintergrundbild dem übergeordneten Element entspricht divund dann die background-attachment:fixedCSS-Eigenschaft zusammen mit denselben backgroundEigenschaften verwendet wird, die für das übergeordnete Element festgelegt wurden.

Dann wenden Sie filter:blur(10px)(oder einen beliebigen Wert) auf das untergeordnete div an.

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.background{
    position: relative;
    width:100%;
    height:100vh;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
}

.blur{
    position: absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    filter:blur(10px);
    transition:filter .5s ease;
    backface-visibility: hidden;
}

.background:hover .blur{
    filter:blur(0);
}
.text{
    display: inline-block;
    font-family: sans-serif;
    color:white;
    font-weight: 600;
    text-align: center;
    position: relative;
    left:25%;
    top:50%;
    transform:translate(-50%,-50%);
}

<head>
    <title>Blurry Effect</title>
</head>
<body>
    <div class="background">
        <div class="blur"></div>
        <h1 class="text">This is the <br>blurry side</h1>
    </div>
</body>
</html>

Ansicht auf Codepen

Hier ist eine Lösung, die mit festen Hintergründen funktioniert. Wenn Sie einen festen Hintergrund haben und einige überlagerte Elemente haben und dafür unscharfe Hintergründe benötigen, funktioniert diese Lösung:

Bild wir haben dieses einfache HTML:

<body> <!-- or any wrapper -->
   <div class="content">Some Texts</div>
</body>

Ein fester Hintergrund für <body>oder das Wrapper-Element:

body {
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Und hier haben wir zum Beispiel ein überlagertes Element mit einem weißen transparenten Hintergrund:

.content {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}

Jetzt müssen wir genau das gleiche Hintergrundbild unseres Wrappers auch für unsere Overlay-Elemente verwenden. Ich verwende es als :beforePseudo-Klasse:

.content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(5px);
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Da der feste Hintergrund sowohl in Wrapper- als auch in überlagerten Elementen auf dieselbe Weise funktioniert, befindet sich der Hintergrund in genau derselben Bildlaufposition wie das überlagerte Element und wir können ihn einfach verwischen. Hier ist eine funktionierende Geige, die in Firefox, Chrome, Opera und Edge getestet wurde: https://jsfiddle.net/0vL2rc4d/

HINWEIS: In Firefox gibt es einen Fehler , der den Bildschirm beim Scrollen flackern lässt, und es gibt feste unscharfe Hintergründe. Wenn es eine Lösung gibt, lass es mich wissen

Dadurch wird die Unschärfe über den Inhalt gelegt:

.blur{
 display:block;
 bottom: 0;
 left: 0;
 position: fixed;
 right: 0;
 top: 0;
 -webkit-backdrop-filter: blur(15px);
 backdrop-filter: blur(15px);
 background-color: rgba(0, 0, 0, .5);
}