CSS3/HTML 5/PNG sfocatura contenuto dietro elemento

Sto cercando di sfocare il contenuto dietro un'intestazione di posizione fissa in modo che il contenuto dietro di esso abbia gli scrolls dell'utente è sfocato quando dietro questo div.CSS3/HTML 5/PNG sfocatura contenuto dietro elemento

Mi sono abituato a ottenere questo risultato con una semplice opacità in CSS, ma questo non blu il contenuto dietro il DIV, semplicemente impone un pannello traslucido di fronte ad esso.

C'è un modo semplice anche se è un imbroglio di ottenere ciò che sto cercando. Che si tratti di un'immagine di sfondo PNG o CSS.

Dai un'occhiata al modo in cui iOS7 fa questo http://www.apple.com/ios/ios7/features/.

fonte

2013-06-29 Robin Knight

È il 2015 ora e Apple ha annunciato Safari 9, che supporta una nuova funzionalità CSS, lo backdrop-filter. Usando questa regola CSS sul tuo div applica filtri per gli elementi dietro di esso solo:

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

example

Questa funzione è attualmente disponibile solo in Safari in ogni caso (e il prefisso -webkit è necessario per farlo funzionare), in modo da Non consiglio di usarlo per ora. In tal caso, essere sicuri di fare uso di @supports e/o JS per implementare ripiego per i browser che ancora non lo supportano:

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

Ecco il compatibility table at caniuse.com, così come le Chromium e Firefox richieste di funzionalità.

Ulteriori informazioni su what's new in Safari.

fonte

2015-09-14 22:41:33

No, non è ancora possibile sfocare il contenuto sotto qualcosa, è necessario sfocare l'elemento stesso.

la risposta che state cercando è in questa domanda Blur Img's & Div's in HTML using CSS

fonte

2013-06-29 12:44:40 skmasq

Questo è veramente duro. Al momento non puoi farlo come fa iOS, poiché puoi sfocare o non sfocare un elemento. Non puoi semplicemente sfumare parte di esso.

È possibile utilizzare il filtro sfocatura di Webkit sugli altri elementi, ma non è abbastanza buono.

Un po 'buon senso usare che è:

*:not(.unblurred) { 
-webkit-filter: blur(1px); 
}

Ma questo non è proprio l'ideale in quasi tutti i casi.

I CSS Custom Shaders sono probabilmente promettenti, come forse sta usando -moz-element come sfondo, ma in questo momento la risposta è fondamentalmente 'sfortuna'.

Provare http://iamvdo.me/conf/2012/kiwiparty/#/33 in Firefox (fare clic in qualsiasi punto) per visualizzare l'effetto -moz-element. Non è male, ma il supporto è limitato ed è molto lento.

http://codepen.io/simurai/pen/dFzxL mostra una demo che non è male, ma si basa sul fatto di avere un'immagine di sfondo che è conosciuta in anticipo.

http://webdirections.org/demos/translucency/index.html è un'altra demo, che non è affatto male. Tutorial è http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/

fonte

2013-06-29 12:50:09

Grazie. Cosa accadrebbe se avessi un'intestazione fissa di sfondo semitrasparente e posizionata in modo assoluto dietro l'intestazione semitrasparente fissa con il filtro sfocato del filtro web applicato. Sarebbe sfocato anche il contenuto che mostrava dietro di esso? –

Non sono sicuro che lo stia immaginando, ma la versione breve è, le sole cose che si offuscano sono le cose con la proprietà blur. Le cose attraverso di loro non sono sfocate. Quello che hai descritto sembra corretto. Prova a farlo e postare qui per le persone future! –

Con un po 'di HTML5 e JavaScript magia, la risposta è sì:

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

uomo di paglia:

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

      <!-- content--> 

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

Avrete bisogno jQuery, Stackblur e html2canvas.

Duplicare l'area del contenuto e convertirla in tela.
Sposta la tela nell'intestazione.
Sincronizza lo scorrimento del contenuto con la tela nell'intestazione.

html2canvas crea la tela, Stackblur crea una sfocatura gaussiana sull'area di disegno e l'elemento di intestazione è sovrapposto al div .blurheader per simulare la traslucenza.

Se si ha dimestichezza con JavaScript, potrebbe valere la pena di indagare ulteriormente. Supporta le ultime versioni di IE, Chrome, Safari e Firefox e consente opzioni di fallback agevoli per i browser legacy.

Cheers.

fonte

2013-10-21 01:17:36 nallenscott

Mi piace molto questa soluzione, ma si rompe quando aggiungo alcune immagini con attributi src effettivi. Qualche idea? [JSfiddle] (http: // jsfiddle.net/WtQjY/123 /) – Matt

@Matt, quello che stai vedendo è il risultato di una limitazione nella tela relativa alle immagini di origine incrociata. L'immagine con un URI di dati funziona perché è memorizzata localmente nel DOM. html2canvas non può leggere il contenuto cross-origin senza l'assistenza di un proxy. Google "html2canvas proxy" per esempi. Vedi anche [html2canvas Docs - Limitazioni] (http://html2canvas.hertzen.com/documentation.html#limitations) e [HTML5 Rocks: Uso di CORS - CORS w/images] (http://www.html5rocks.com/ it/tutorial/cors/# toc-immagini). – nallenscott

funziona bene, ma avrebbe bisogno di lavoro aggiuntivo (e costerebbe prestazioni aggiuntive) se il ridimensionamento fosse preso in considerazione. ancora, soluzione impressionante! – kritzikratzi

Un modo per farlo senza <tela> è:

Creare un profondo clone del sottoalbero che contiene elementi parzialmente bloccato.
Sfoca il clone e posizionalo in modo che si impili sopra la sottostruttura originale.
Taglia il clone all'elemento di blocco.
Taglia la sottostruttura originale alle aree esterne all'elemento di blocco (utilizzando il percorso della clip).

Sto sperimentando con questo metodo here. Il codice che lo fa è principalmente here.

Alcuni degli svantaggi sono:

Se si modifica la visibilità degli elementi o di modificare il DOM, è necessario aggiornare i cloni.
Può rendere lo scorrimento un po 'lento.
I cloni degli elementi parzialmente bloccati devono essere disegnati in modo identico affinché funzioni correttamente.

fonte

2014-06-18 22:45:13 hagabaka

Anche se questo avrebbe funzionato, è altamente inefficiente. – Enrico

CSS3/HTML 5/PNG sfocatura contenuto dietro elemento

risposta

Problemi correlati