CSS3 / HTML 5 / PNG blur content behind element

Próbuję zamazać zawartość za nagłówkiem o stałej pozycji, aby zawartość za nim miała przewijania Użytkownika była zamazana, gdy za tym div.

Kiedyś to osiągnąć z prostym krycie w CSS, ale to nie Niebieski Zawartość za DIV, tylko nakłada półprzezroczyste panelu przed nim.

Czy istnieje prosty sposób, nawet jeśli jest to oszustwo osiągnięcia tego, czego szukam. Czy to za pomocą obrazu tła PNG, czy w CSS.

Spójrz na sposób, w jaki robi iOS7 to http://www.apple.com/ios/ios7/features/.

Author: Robin Knight, 2013-06-29
Source

5 answers

Jest teraz 2015, a Apple ogłosiło Safari 9, które obsługuje nową funkcję CSS, backdrop-filter. Użycie tej reguły CSS na div stosuje filtry tylko do elementów znajdujących się za nią: 

#myDiv {
    backdrop-filter: blur(10px);
}

Ta funkcja jest obecnie dostępna tylko w Safari (a prefiks -webkit jest wymagany do jej działania), więc na razie nie polecam jej używać. Jeśli to zrobisz, użyj @supports lub/i JS, aby zaimplementować funkcję awaryjną dla przeglądarek, które nie obsługują jej jeszcze: 

@supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }
}

Oto tabela zgodności na caniuse.com [[14]}, a także żądania funkcji Chromium i Firefox .

Dowiedz się więcej o Co nowego w Safari.

 9
Author: Tiago Marinho,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-24 00:32:01

Z odrobiną magii HTML5 i JavaScript, odpowiedź brzmi TAK:

Http://jsfiddle.net/nallenscott/WtQjY/41/

Straw man: 

<body>
    <section>
        <article>
            <header></header>
            <div class="blurheader"></div>

            <!-- content-->

        </article>
    </section>
</body>

Będziesz potrzebował jQuery, Stackblur i html2canvas.

  1. Powiel obszar zawartości i przekonwertuj go na obszar canvas.
  2. Przenieś obszar roboczy do nagłówka.

  3. Zsynchronizuj przewijanie zawartości z kanwą w nagłówku.

    html2canvas tworzy płótno, Stackblur tworzy rozmycie Gaussa na obszarze roboczym, a element nagłówka jest warstwą nad div .blurheader, aby symulować przezroczystość.

Jeśli czujesz się komfortowo z JavaScript, to może warto zbadać to dalej. Obsługuje najnowsze wersje IE, Chrome, Safari i Firefox i umożliwia wdzięczne opcje awaryjne dla starszych przeglądarek.

Zdrówko.
 26
Author: nallenscott,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-18 14:32:54

To naprawdę trudne. W tej chwili nie możesz tego zrobić tak, jak robi to iOS, ponieważ możesz rozmyć lub nie rozmyć elementu. Nie możesz rozmazać części.

Możesz użyć filtra rozmycia Webkita na innych elementach, ale to nie jest wystarczająco dobre.

Dobry Sposób Użycia to: 

*:not(.unblurred) {
 -webkit-filter: blur(1px);
}
Ale to nie jest idealne w prawie każdym przypadku.

Niestandardowe shadery CSS są prawdopodobnie obiecujące, podobnie jak użycie-moz-element jako tła, ale teraz odpowiedź brzmi: w zasadzie "pech".

Spróbuj http://iamvdo.me/conf/2012/kiwiparty/#/33 w Firefoksie (kliknij w dowolnym miejscu), aby zobaczyć efekt-moz-element. Nie jest źle, ale wsparcie jest ograniczone i jest bardzo powolne.

Http://codepen.io/simurai/pen/dFzxL pokazuje demo, które nie jest złe, ale opiera się na obrazie tła, który jest znany z wyprzedzeniem.

Http://webdirections.org/demos/translucency/index.html to kolejne demo, które wcale nie jest złe. Tutorial jest http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/

 2
Author: Rich Bradshaw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-29 12:50:09

Nie, nadal nie można rozmazać treści pod czymś, trzeba rozmazać sam element.

Odpowiedź, której szukasz, znajduje się w tym pytaniu Blur Img 's & Div' s W HTML za pomocą CSS

 1
Author: skmasq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:30:38

Sposobem na to bez jest:

  1. Utwórz głęboki klon poddrzewa, który zawiera częściowo zablokowane elementy.
  2. zamazuj klon i ustaw go tak, aby układał się na szczycie oryginalnego poddrzewa.
  3. przypiąć klon do elementu blokującego.
  4. Przypisz oryginalny poddrzew do obszarów poza elementem blokującym (za pomocą ścieżki klipu).

Eksperymentuję z tą metodą tutaj . Kod, który to robi, to głównie tutaj .

Niektóre wady to:

  1. Jeśli zmienisz widoczność elementów lub zmodyfikujesz DOM, musisz zaktualizować klony.
    2. Może sprawić, że przewijanie będzie trochę powolne.
  2. klony częściowo zablokowanych elementów muszą być stylizowane identycznie, aby to działało.
 0
Author: hagabaka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-18 22:45:13