it-swarm.com.de

Wie kann ich einen CSS-Glas- / Unschärfeeffekt für ein Overlay verwenden?

Ich habe Probleme, einen Weichzeichnungseffekt auf ein halbtransparentes Overlay-Div anzuwenden. Ich möchte, dass alles hinter dem div verschwimmt:

SFW image

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

Irgendwelche Ideen, wie man diese Arbeit macht? Ich möchte dies so unkompliziert wie möglich halten und 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);
}
72
Chad Johnson

Vielen Dank für die Hilfe an alle! Ich konnte Informationen von allen hier und von weiterem Googeln zusammenstellen und fand Folgendes, das in Chrome und Firefox funktioniert: http://jsfiddle.net/ u2y2091z/12 / . Ich arbeite immer noch daran, dass dies für IE und Opera funktioniert.

Der Schlüssel setzt den Inhalt innerhalb des Divs, 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:

#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;

    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask");
}

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 kam 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 in der Maske verschwommen.

42
Chad Johnson

In diesem Beispiel wird der Filter svg verwendet.

Die Idee ist, ein svg -Element mit height zu verwenden, das dem #overlay Entspricht, und den feGaussianblur -Filter darauf anzuwenden. Dieser Filter wird auf ein svgimage -Element angewendet. Um einen extrudierten Effekt zu erzielen, können Sie einen box-shadow Am unteren Rand des Overlays verwenden.

Browser-Unterstützung für svg Filter .

Demo auf 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>
63
Weafs.py

Wenn Sie heute einen zuverlässigen browserübergreifenden Ansatz suchen , werden Sie keinen großartigen finden. Die beste Möglichkeit besteht darin, zwei Bilder zu erstellen (dies kann in einigen Umgebungen automatisiert sein) und sie so anzuordnen, dass eines über dem anderen liegt. Ich habe ein einfaches Beispiel unten 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 .

enter image description here

9
Sampson

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ß, das CSS kann vereinfacht werden und Sie sollten die IDs wahrscheinlich loswerden. 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 SVG-Hack verwenden.

8
#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>
3

Ich habe diese Lösung gefunden.

Klicken Sie hier, um das Bild des verschwommenen Effekts anzuzeigen.

Es ist eine Art Trick, der ein absolut positioniertes untergeordnetes Element div verwendet, dessen Hintergrundbild mit dem übergeordneten Element div identisch ist und anschließend die CSS-Eigenschaft background-attachment:fixed Zusammen mit demselben background Eigenschaften, 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>

Blick auf Codepen

1
CptGeo