Wygląda na to, że nakładka Apple to coś więcej niż tylko przezroczystość. Jakieś pomysły, jak osiągnąć ten efekt za pomocą CSS i ewentualnie JS?

Z CSS3 jest to możliwe:

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

Przykład tutaj => jsfiddle

Sprawiłeś, że chciałem spróbować, więc tak zrobiłem, sprawdź tutaj przykład:

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

Za pomocą:

1. HW Accelerated CSS filtry
2. JS do przypisywania klas i zdarzeń klawiszy strzałek
3. Obrazy CSS Clip Właściwość

Otóż ​​to.

Uważam również, że można to zrobić dynamicznie dla dowolnego ekranu, jeśli użyjesz płótna do skopiowania bieżącej domeny i zamazania jej.

[Edytuj] W przyszłości (mobilna) Safari 9 będzie -webkit-backdrop-filterwłaśnie do tego. Zobacz to długopis, który zrobiłem, aby go zaprezentować.

Myślałem o tym przez ostatnie 4 tygodnie i wpadłem na takie rozwiązanie.

Live Demo

[Edytuj] Napisałem bardziej dogłębny post na temat CSS-Tricks

Ta technika wykorzystuje regiony CSS, więc obsługa przeglądarki nie jest w tej chwili najlepsza. ( http://caniuse.com/#feat=css-regions )

Kluczową częścią tej techniki jest oddzielenie treści od układu za pomocą regionu CSS. Najpierw zdefiniuj .contentelement za pomocąflow-into:content a następnie użyj odpowiedniej struktury, aby rozmyć nagłówek.

Struktura układu:

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

Dwie ważne części tego układu to .header__backgroundi.phone__content - są to kontenery, przez które powinna przepływać zawartość.

Korzystanie z regionów CSS jest proste, ponieważ flow-from:content( .contentpłynie do nazwanego regionu content)

Teraz najtrudniejsza część. Chcemy zawsze przepływać zawartość przez .header__backgroundsekcję, ponieważ jest to sekcja, w której zawartość zostanie zamazana. (używając webkit-filter:blur(10px);)

Robi transfrom:translateY(-$HeightOfTheHeader)to, .contentaby upewnić się, że zawartość zawsze będzie przepływać przez .header__background. Ta transformacja zawsze ukrywa zawartość pod nagłówkiem. Naprawienie tego jest łatwe w dodawaniu

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

aby dostosować się do transformacji.

Obecnie to działa w:

• Chrome 29+ (włącz „experimental-webkit-features” / „enable-experimental-web-platform-features”)
• Rozstawienie Safari 6.1 6
• iOS7 ( wolne i bez przewijania )

Jest to możliwe w przypadku FireFox teraz dzięki atrybutowi stylu elementu .

Ten eksperymentalny atrybut umożliwia użycie dowolnej treści HTML jako obrazu tła. Tak więc, aby stworzyć tło, potrzebujesz trzech nakładek:

1. Prosta nakładka z jednolitym tłem (w celu ukrycia prawdziwej zawartości nakładki).
2. Nakładka z -moz-elementtłem, które ustawia zawartość. Zwróć uwagę, że FX nie obsługuje tego filter: blur()atrybutu, więc potrzebujemy pliku SVG.
3. Nakładka z niewyraźną zawartością.

Więc połącz:

Filtr rozmycia SVG (działa w FX, inne przeglądarki mogą używać filter:blur() ):

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

Styl rozmycia CSS:

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

Wreszcie 3 warstwy:

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

Następnie, aby to przenieść, po prostu ustaw background-position (przykład w jQuery, ale możesz użyć wszystkiego):

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

Tutaj jest jako JS Fiddle, tylko FX.

Sprawdź tę stronę demonstracyjną.
To demo wykorzystuje html2canvas do renderowania dokumentu jako obrazu.

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

1. Po kliknięciu łącza „Pokaż wyskakujące okienko” wywoływana jest funkcja „makePopup”.
2. „makePopup” uruchamia html2canvas do renderowania dokumentu jako obrazu.
3. Obraz jest konwertowany na łańcuch data-url i malowany jako obraz tła wyskakującego okienka.
4. Pole bg wyskakującego okienka jest rozmyte przez -webkit-filter: blur
5. Dołącz wyskakujące okienko do dokumentu.
6. Podczas przeciągania wyskakującego okienka zmienia swoje własne położenie w tle.

Ten długopis, który znalazłem poprzedniego dnia, wydawał się robić to pięknie, tylko trochę css i 21 linii javascript. Nie słyszałem o poleceniu cloneNode js, dopóki tego nie znalazłem, ale na pewno działało to na pewno.

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

Szczegóły: A. W zasadzie przegląda element div z zawartością i wywołuje na nim cloneNode, więc tworzy duplikat, który następnie umieszcza w przepełnieniu: ukryty obiekt nagłówka znajdujący się na górze strony. B. Następnie po prostu nasłuchuje przewijania, więc oba obrazy wydają się pasować i rozmywa obraz nagłówka ... annnnd BAM. Efekt osiągnięty.

Nie do końca wykonalne w CSS, dopóki nie uzyskają odrobiny skryptowalności wbudowanej w język.

• sklonuj element, który chcesz zamazać
• dołącz go do elementu, na którym chcesz się znaleźć (matowe okienko)
• rozmycie sklonowanego elementu za pomocą filtra webkit
• upewnij się, że sklonowany element jest ustawiony bezwzględnie
• podczas przewijania elementu nadrzędnego oryginalnego elementu przechwyć scrollTop i scrollLeft
• używając requestAnimationFrame, ustaw dynamiczną transformację zestawu webkit na translate3d z wartościami x i y na scrollTop i scrollLeft

Przykład jest tutaj:

• upewnij się, że otwierasz w przeglądarce webkit
• przewiń widok telefonu (najlepiej z myszką Apple ...)
• zobacz rozmytą stopkę w akcji

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

zrobiłem wczoraj szybkie demo, które faktycznie robi to, o czym mówisz. http://bit.ly/10clOM9 to demo wykonuje paralaksę w oparciu o akcelerometr, więc działa najlepiej na samym iPhonie. Po prostu kopiuję zawartość, którą nakładamy, do elementu o stałej pozycji, który się rozmywa.

uwaga: przesuń palcem w górę, aby zobaczyć panel.

(Użyłem okropnych identyfikatorów CSS, ale masz pomysł)

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

Nie jestem tego pewien, uważam, że CSS nie jest w stanie tego zrobić w tej chwili

Jednak Chris Coyier napisał na blogu o starej technice z wieloma obrazami, aby osiągnąć taki efekt, http://css-tricks.com/blurry-background-effect/

Sprawdź ten http://codepen.io/GianlucaGuarini/pen/Hzrhf Wygląda na to, że działa bez duplikowania obrazu tła elementu pod nim. Zobacz też, jak w przykładzie teksty się zacierają.

Vague.js

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

Dobre wieści

Od dziś 11 kwietnia 2020 r. Jest to łatwo możliwe dzięki backdrop-filterwłaściwości CSS, która jest teraz stabilną funkcją w Chrome, Safari i Edge.

Chciałem to w naszej hybrydowej aplikacji mobilnej, która jest również dostępna w Android / Chrome Webview i Safari WebView.

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

Przykład kodu:

Po prostu dodaj właściwość CSS:

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

Przykład interfejsu użytkownika 1

Zobacz, jak działa w tym piórze lub wypróbuj demo:

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

Przykład interfejsu użytkownika 2

Weźmy przykład aplikacji McDonald's, ponieważ jest dość kolorowa. Zrobiłem zrzut ekranu i dodałem jako tło w bodymojej aplikacji.

Chciałem pokazać na nim tekst z błyszczącym efektem. Korzystając backdrop-filter: blur(20px);z nakładki powyżej, mogłem to zobaczyć: 😍

Używałem filtrów svg, aby osiągnąć podobne efekty dla duszków

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

• Atrybut viewBox wybierze tylko żądaną część dołączonego obrazu.
• Po prostu zmień filtr na dowolny, na <feGaussianBlur stdDeviation="10"/>przykład przykład Keitha .
• Użyj <image ...>tagu, aby zastosować go do dowolnego obrazu, a nawet użyć wielu obrazów.
• Możesz to zbudować za pomocą js i użyć go jako obrazu lub użyć identyfikatora w swoim css.

To może ci pomóc !!

To dynamicznie zmienia tło, tak jak robi to IOS

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

Oto moje spojrzenie na to z jQuery. Rozwiązanie nie jest uniwersalne, co oznacza, że ​​należałoby dostosować niektóre pozycje i rzeczy w zależności od faktycznego projektu.

Zasadniczo to, co zrobiłem, to: klonowanie na wyzwalaczu / usuwanie całego tła (co powinno być rozmyte) do pojemnika z niewyraźną zawartością (który opcjonalnie ma ukryte przepełnienie, jeśli nie ma pełnej szerokości) i ustawianie go poprawnie. Uwaga jest taka, że ​​przy zmianie rozmiaru okna rozmyty element div będzie niezgodny z oryginałem pod względem pozycji, ale można to rozwiązać za pomocą niektórych funkcji zmiany rozmiaru okna (szczerze mówiąc, nie mogłem się tym przejmować).

Byłbym bardzo wdzięczny za opinię na temat tego rozwiązania!

Dzięki

Oto skrzypce , nie testowane w IE.

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