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

100

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

SFW-Bild

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);
}
Chad Johnson
quelle
1
Zu CSS filterIhrer Information - wird in Firefox nicht unterstützt, Sie sollten es nicht verwenden.
Weafs.py
2
Machen Sie das Div möglicherweise undurchsichtig, verwenden Sie jedoch ein Pseudoelement mit dem Bild als Hintergrund, das unabhängig voneinander verwischt werden kann.
bjb568
1
@ chipChocolate.py CSS-Filter werden standardmäßig in FF35 + unterstützt. Aber ich stimme Ihnen zu, wir als Entwickler sollten uns nicht darauf verlassen, da es sich nicht um eine browserübergreifende Funktion handelt.
Hashem Qolami

Antworten:

71

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>

Weafs.py
quelle
66

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.

Jon Catmull
quelle
1
Dies ist bei weitem die beste Antwort.
Gerber Burton
51

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.

Chad Johnson
quelle
es ist sooo klug
Gangsar Swapurba
3
Chrome mag das Finale nicht filter: url(.... Entfernen Sie das und Chrome verwendet erfolgreich filter: blur(10px);.
Doug S
2
Habe ich falsch verstanden? Es ist nicht das, was das OP will. Die Texte sollten nicht unscharf sein.
Eric
2
@Eric, Sie eindeutig falsch verstehen, da der Antworter ist die OP.
Tao
10

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 .

Geben Sie hier die Bildbeschreibung ein

Sampson
quelle
8

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 .

Juho Vepsäläinen
quelle
@ chipChocolate.py Ich denke, Sie müssen in diesem Fall den SVG-Hack verwenden, demosthenes.info/blog/534/Crossbrowser-Image-Blur .
Juho Vepsäläinen
Beachten Sie, dass Sie für den CSS-Filter andere Herstellerpräfixe weglassen können, als -webkit-da diese in diesen Browsern nicht implementiert sind. Es ist besser, die Standarddeklaration am Ende zu setzen - nach allen vorangestellten Versionen.
Hashem Qolami
@ HashemQolami Fertig. Vielen Dank.
Juho Vepsäläinen
FF ist jetzt in Ordnung (54.0.1 (32-Bit)). Einfach perfekt! Tx!
Pedro Ferreira
5
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>

Allen Wong
quelle
Die gleiche Lösung wurde bereits vorgeschlagen: stackoverflow.com/a/58083568/3702797
Kaiido
4

#bg, #search-bg {
  background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
  background-repeat: no-repeat;
  background-size: 1080px auto;
}

#bg {
  background-position: center top;
  padding: 70px 90px 120px 90px;
}

#search-container {
  position: relative;
}

#search-bg {
  /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;

  /* Pull the background 70px higher to the same place as #bg's */
  background-position: center -70px;

  -webkit-filter: blur(10px);
  filter: url('/media/blur.svg#blur');
  filter: blur(10px);
}

#search {
  /* Put this on top of the blurred layer */
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}

@media (max-width: 600px ) {
  #bg { padding: 10px; }
  #search-bg { background-position: center -10px; }
}

#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }
<div id="bg">
  <div id="search-container">
    <div id="search-bg"></div>
    <div id="search">
      <h2>Awesome</h2>
      <h5><a href="#">How it works »</a></h5>
    </div>
  </div>
</div>

Prajeesh Loremine
quelle
1

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

CptGeo
quelle
0

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

Amin
quelle
0

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);
}
Magnettoo
quelle