Es scheint, dass Apples Overlay mehr als nur eine Transparenz ist. Irgendwelche Ideen, wie dieser Effekt mit CSS und möglicherweise JS erzielt werden kann?

Mit CSS3 ist Folgendes möglich:

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Beispiel hier => jsfiddle

Du hast mich dazu gebracht, es zu versuchen, also habe ich mir das Beispiel hier angesehen:

http://codepen.io/Edo_B/pen/cLbrt

Verwenden von:

1. HW Accelerated CSS-Filter
2. JS für Klassenzuweisung und Pfeiltastenereignisse
3. CSS-Clip-Eigenschaft für Bilder

das ist es.

Ich glaube auch, dass dies für jeden Bildschirm dynamisch durchgeführt werden kann, wenn Leinwand verwendet wird, um den aktuellen Dom zu kopieren und ihn zu verwischen.

[Bearbeiten] In Zukunft wird es -webkit-backdrop-filterfür (mobile) Safari 9 genau das geben. Sehen Sie diesen Stift, den ich gemacht habe, um ihn zu präsentieren.

Ich habe in den letzten 4 Wochen darüber nachgedacht und mir diese Lösung ausgedacht.

Live-Demo

[Bearbeiten] Ich habe einen ausführlicheren Beitrag über CSS-Tricks geschrieben

Bei dieser Technik werden CSS-Regionen verwendet, sodass die Browserunterstützung derzeit nicht die beste ist. ( http://caniuse.com/#feat=css-regions )

Der Hauptteil dieser Technik besteht darin, Inhalte mithilfe der CSS-Region vom Layout zu trennen. Definieren Sie zuerst ein .contentElement mit flow-into:contentund verwenden Sie dann die entsprechende Struktur, um die Kopfzeile zu verwischen.

Die Layoutstruktur:

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

Die beiden wichtigen Teile dieses Layouts sind .header__backgroundund .phone__content- dies sind die Container, in denen der Inhalt fließen soll.

Mit CSS-Regionen ist es einfach wie flow-from:content( .contentfließt in die benannte Region content)

Jetzt kommt der schwierige Teil. Wir möchten den Inhalt immer durch das fließen lassen, .header__backgroundda dies der Abschnitt ist, in dem der Inhalt verwischt wird. (mit webkit-filter:blur(10px);)

Dies geschieht durch transfrom:translateY(-$HeightOfTheHeader)die, .contentum sicherzustellen, dass der Inhalt immer durch die fließt .header__background. Diese Transformation verbirgt dabei immer Inhalte unter der Kopfzeile. Dies zu beheben ist einfach hinzuzufügen

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

für die Transformation unterzubringen.

Dies funktioniert derzeit in:

• Chrome 29+ (aktiviere 'experimentelle Webkit-Funktionen' / 'experimentelle Web-Plattform-Funktionen aktivieren')
• Safari 6.1 Seed 6
• iOS7 ( langsam und kein Scrollen )

Dies ist jetzt mit FireFox dank des Attributs element style möglich.

Mit diesem experimentellen Attribut können Sie jeden HTML-Inhalt als Hintergrundbild verwenden. Um den Hintergrund zu erstellen, benötigen Sie drei Überlagerungen:

1. Einfache Überlagerung mit festem Hintergrund (um den tatsächlichen Überlagerungsinhalt auszublenden).
2. Überlagern Sie mit einem -moz-elementHintergrund, der den Inhalt festlegt. Beachten Sie, dass FX das filter: blur()Attribut nicht unterstützt , daher benötigen wir eine SVG.
3. Überlagerung mit nicht unscharfem Inhalt.

Also zusammen:

SVG-Unschärfefilter (funktioniert in FX, andere Browser könnten ihn verwenden filter:blur()):

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

CSS-Unschärfestil:

.behind-blur 
{
    filter         : url(#svgBlur); 
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

Endlich 3 Schichten:

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

Um dies zu verschieben, legen Sie einfach Folgendes fest background-position(Beispiel in jQuery, aber Sie können alles verwenden):

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

Hier ist es als JS Fiddle, nur FX.

Schauen Sie sich diese Demoseite an.
Diese Demo verwendet html2canvas zum Rendern von Dokumenten als Bild.

http://blurpopup.labs.daum.net/

1. Wenn Sie auf den Link "Popup anzeigen" klicken, wird die Funktion "makePopup" aufgerufen.
2. 'makePopup' führt html2canvas aus, um ein Dokument als Bild zu rendern.
3. Das Bild wird in eine Daten-URL-Zeichenfolge konvertiert und als Hintergrundbild des Popups gezeichnet.
4. Popups Hintergrund wird durch den Webkit-Filter verwischt: Unschärfe
5. Fügen Sie das Popup in das Dokument ein.
6. Während Sie das Popup ziehen, ändert es seine eigene Hintergrundposition.

Dieser Stift, den ich neulich gefunden habe, schien es wunderbar zu machen, nur ein bisschen CSS und 21 Zeilen Javascript. Ich hatte erst von dem Befehl cloneNode js gehört, als ich ihn gefunden hatte, aber er funktionierte genau für das, was ich sicher brauchte.

http://codepen.io/rikschennink/pen/zvcgx

Detail: A. Grundsätzlich wird Ihr Inhalts-Div betrachtet und ein cloneNode darauf aufgerufen, sodass ein Duplikat erstellt wird, das dann im Überlauf platziert wird: verstecktes Header-Objekt, das oben auf der Seite sitzt. B. Dann hört es einfach auf das Scrollen, so dass beide Bilder übereinstimmen und das Header-Bild verwischen ... annnnd BAM. Wirkung erzielt.

In CSS nicht wirklich vollständig machbar, bis sie ein bisschen Skriptfähigkeit in die Sprache eingebaut haben.

• Klonen Sie das Element, das Sie verwischen möchten
• Hängen Sie es an das Element an, das Sie oben haben möchten (das mattierte Fenster).
• Klonelement mit Webkit-Filter verwischen
• Stellen Sie sicher, dass das geklonte Element absolut positioniert ist
• Wenn Sie durch das übergeordnete Element des Originalelements scrollen, fangen Sie scrollTop und scrollLeft
• Setzen Sie nun mit requestAnimationFrame die Webkit-Transformation dynamisch auf translate3d mit x- und y-Werten auf scrollTop und scrollLeft

Beispiel ist hier:

• Stellen Sie sicher, dass Sie im Webkit-Browser öffnen
• Scrollen Sie in der Telefonansicht (am besten mit Apfelmaus ...)
• Sehen Sie die verwischende Fußzeile in Aktion

http://versie1.com/TEST/ios7/

habe gestern eine kurze Demo gemacht, die genau das macht, worüber du sprichst. http://bit.ly/10clOM9 Diese Demo führt die Parallaxe basierend auf dem Beschleunigungsmesser aus, sodass sie am besten auf einem iPhone selbst funktioniert. Ich kopiere den Inhalt, den wir überlagern, einfach in ein Element mit fester Position, das unscharf wird.

Hinweis: Wischen Sie nach oben, um das Bedienfeld anzuzeigen.

(Ich habe schreckliche CSS-IDs verwendet, aber Sie haben die Idee)

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}

Ich bin mir da nicht ganz sicher, ich glaube, dass CSS dies im Moment nicht kann

Chris Coyier hat jedoch über eine alte Technik mit mehreren Bildern gebloggt, um einen solchen Effekt zu erzielen: http://css-tricks.com/blurry-background-effect/

Schauen Sie sich dieses an http://codepen.io/GianlucaGuarini/pen/Hzrhf Scheint, als würde es den Effekt erzielen, ohne das Hintergrundbild des Elements unter sich zu duplizieren. Siehe Texte verschwimmen auch im Beispiel.

Vague.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();

Gute Nachrichten

Ab dem heutigen 11. April 2020 ist dies mit der backdrop-filterCSS-Eigenschaft, die jetzt eine stabile Funktion in Chrome, Safari & Edge ist, problemlos möglich .

Ich wollte dies in unserer Hybrid-App für Mobilgeräte, die auch in Android / Chrome Webview und Safari WebView verfügbar ist.

1. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
2. https://caniuse.com/#search=backdrop-filter

Codebeispiel:

Fügen Sie einfach die CSS-Eigenschaft hinzu:

.my-class {
    backdrop-filter: blur(30px);
    background: transparent;     // Make sure there is not backgorund
}

UI-Beispiel 1

Sehen Sie, wie es in diesem Stift funktioniert, oder probieren Sie die Demo aus:

#main-wrapper {
  width: 300px;
  height: 300px;
  background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.my-effect {
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: top 700ms;
}

#main-wrapper:hover .my-effect {
  top: 0;
}

<h4>Hover over the image to see the effect</h4>

<div id="main-wrapper">
  <div class="my-effect">
    Glossy effect worked!
  </div>
</div>

UI-Beispiel 2

Nehmen wir ein Beispiel für die McDonald's-App, weil sie ziemlich farbenfroh ist. Ich habe den Screenshot gemacht und als Hintergrund in bodymeine App eingefügt .

Ich wollte einen Text darüber mit dem Glanzeffekt zeigen. Mit backdrop-filter: blur(20px);dem Overlay darüber konnte ich Folgendes sehen: 😍

Ich habe SVG-Filter verwendet, um ähnliche Effekte für Sprites zu erzielen

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>

• Das viewBox-Attribut wählt nur den Teil Ihres eingeschlossenen Bildes aus, den Sie möchten.
• Ändern Sie einfach den Filter in einen beliebigen Filter, wie <feGaussianBlur stdDeviation="10"/>z. B. das Beispiel von Keith .
• Verwenden Sie das <image ...>Tag, um es auf ein Bild anzuwenden, oder verwenden Sie sogar mehrere Bilder.
• Sie können dies mit js aufbauen und als Image verwenden oder die ID in Ihrem CSS verwenden.

Das könnte dir helfen !!

Dies ändert dynamisch den Hintergrund, den nur IOS hat

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}

Hier ist meine Einstellung dazu mit jQuery. Die Lösung ist nicht universell, was bedeutet, dass man einige der Positionen und Dinge abhängig vom tatsächlichen Design anpassen müsste.

Grundsätzlich habe ich Folgendes getan: Beim Auslösen klonen / entfernen Sie den gesamten Hintergrund (was unscharf sein sollte) in einen Container mit unscharfem Inhalt (der optional einen versteckten Überlauf aufweist, wenn er nicht die volle Breite hat) und positionieren Sie ihn korrekt. Vorsichtsmaßnahme ist, dass bei der Größenänderung von Fenstern unscharfe Divs in Bezug auf die Position nicht mit dem Original übereinstimmen, dies könnte jedoch mit einigen Funktionen zur Größenänderung von Fenstern behoben werden (ehrlich gesagt könnte mich das jetzt nicht stören).

Ich würde mich sehr über Ihre Meinung zu dieser Lösung freuen!

Vielen Dank

Hier ist die Geige , nicht im IE getestet.

HTML

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

CSS

body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}

jQuery

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});