Der verschwommene Overlay-Effekt von iOS 7 mit CSS?

Du hast mich dazu gebracht, es zu versuchen, also habe ich das Beispiel hier überprüft:

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

Verwenden von:

1. HW-beschleunigte CSS-Filter
2. JS für die Klassenzuweisung und Pfeiltastenereignisse
3. Images CSS Clip-Eigenschaft

das ist es.

Ich glaube auch, dass dies für jeden Bildschirm dynamisch gemacht werden kann, wenn Canvas zum Kopieren des aktuellen Doms und zum Weichzeichnen verwendet wird.

[Bearbeiten] In der zukünftigen (mobilen) Safari 9 wird es genau dafür -webkit-backdrop-filter Geben. Siehe this 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 wird CSS Regions verwendet, sodass die Browserunterstützung derzeit nicht die beste ist. ( http://caniuse.com/#feat=css-regions )

Der wichtigste Teil dieser Technik besteht darin, den Inhalt mithilfe des CSS-Bereichs vom Layout zu trennen. Definieren Sie zuerst ein .content - Element mit flow-into:content Und verwenden Sie dann die entsprechende Struktur, um den Header 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__background Und .phone__content - das sind die Container, in denen der Inhalt fließen soll.

Die Verwendung von CSS-Regionen ist einfach, da flow-from:content (.content In die genannte Region fließt content)

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

Dies geschieht durch transfrom:translateY(-$HeightOfTheHeader) den .content, Um sicherzustellen, dass der Inhalt immer durch den .header__background Fließt. Diese Transformation führt dazu, dass immer etwas Inhalt unter der Überschrift verborgen bleibt. Dies zu beheben ist ein einfaches Hinzufügen

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

für die Transformation unterzubringen.

Dies funktioniert derzeit in:

• Chrome 29+ (aktivieren Sie 'Experimentelle Webkit-Funktionen'/'Experimentelle Webplattform-Funktionen aktivieren')
• Safari 6.1 Seed 6
• iOS7 ( langsam und kein Scrollen )

Dies ist mit FireFox jetzt 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. Einfaches Overlay mit festem Hintergrund (um den tatsächlichen Overlay-Inhalt auszublenden).
2. Überlagerung mit einem Hintergrund -moz-element, 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 filter:blur() verwenden):

<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;
}

Schließlich 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, setzen Sie einfach background-position (Beispiel in jQuery, aber Sie könnten alles verwenden):

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

Hier ist es als JS Fiddle, nur FX.

Schauen Sie sich diese Demo-Seite 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 das Dokument als Bild zu rendern.
3. Das Bild wird in eine Daten-URL konvertiert und als Hintergrundbild des Popups dargestellt.
4. Popup's BG wird durch verwischt - Webkit-Filter: Unschärfe
5. Hänge das Popup an das Dokument an.
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 bis dahin noch nichts von dem Befehl cloneNode js gehört, aber es funktionierte genau so, wie ich es unbedingt brauchte.

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

Detail: A. Im Grunde betrachtet es Ihr Inhalts-Div und ruft einen cloneNode auf, so dass ein Duplikat erstellt wird, das es dann in das versteckte Header-Objekt overflow: platziert, das sich oben auf der Seite befindet. B. Dann hört es einfach auf das Scrollen, so dass beide Bilder übereinstimmen und das Header-Bild verschwimmen ... annnnd BAM. Wirkung erzielt.

In CSS erst dann wirklich voll machbar, wenn die Sprache ein bisschen Skriptfähigkeit besitzt.

• klonen Sie das Element, das Sie verwischen möchten
• hänge es an das Element an, auf dem du sein möchtest (das gefrostete Fenster)
• geklontes Element mit Webkit-Filter verwischen
• stellen Sie sicher, dass das geklonte Element absolut positioniert ist
• wenn Sie durch das übergeordnete Element des ursprünglichen Elements scrollen, fangen Sie scrollTop und scrollLeft
• setzen Sie nun mithilfe von requestAnimationFrame die Webkit-Transformation dynamisch auf translate3d mit x- und y-Werten für scrollTop und scrollLeft

Beispiel ist hier:

• stellen Sie sicher, dass Sie im Webkit-Browser öffnen
• in der Telefonansicht blättern (am besten mit Apple Maus ...)
• verwischende Fußzeile in Aktion sehen

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

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

hinweis: Streichen Sie nach oben, um das Bedienfeld anzuzeigen.

(Ich habe schreckliche CSS-IDs verwendet, aber Sie bekommen 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);
}

Probieren Sie dieses aus http://codepen.io/GianlucaGuarini/pen/Hzrhf Scheint, als würde der Effekt ohne Duplizieren des Hintergrundbilds des Elements unter sich ausgeführt. Siehe Texte sind auch im Beispiel unscharf.

Vague.js

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

Da bin ich mir nicht ganz sicher, ich glaube, dass CSS das 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/

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 gewünschten Teil Ihres eingebundenen Bildes aus.
• Ändern Sie einfach den Filter in einen beliebigen, wie z. B. Keiths <feGaussianBlur stdDeviation="10"/> Beispiel.
• Verwenden Sie die <image ...>-Tag, um es auf ein Bild anzuwenden oder sogar mehrere Bilder zu verwenden.
• Sie können dies mit js aufbauen und als Bild verwenden oder die ID in Ihrem CSS verwenden.

Das könnte dir helfen !!

Dies ändert dynamisch den Hintergrund nur IOS tut

.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;
}