Sfocatura dello sfondo con i CSS

Voglio un effetto Vista / 7-stile aerodinamico su un popup sul mio sito e deve essere dinamico. Sto bene con questo non essendo un effetto cross-browser finché il sito funziona ancora su tutti i browser moderni.

Il mio primo tentativo è stato quello di usare qualcosa di simile

#dialog_base { background:white; background:rgba(255,255,255,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } 

Tuttavia, come mi sarei aspettato, questo ha comportato lo sfocato del contenuto della finestra di dialogo e lo sfondo rimaneva chiaro. C’è un modo per usare i CSS per sfocare lo sfondo di un elemento semitrasparente invece dei suoi contenuti?

Ottobre AGGIORNAMENTO 2016

Poiché la proprietà -moz-element() non sembra essere ampiamente supportata da altri browser eccetto FF, esiste una tecnica ancora più semplice per applicare la sfocatura senza influire sul contenuto del contenitore. L’uso di pseudoelemento è ideale in questo caso in combinazione con il filtro sfocatura svg.

Controlla la demo usando lo pseudo-elemento

(Demo è stato testato in FF v49, Chrome v53, Opera 40 – IE non sembra supportare la sfocatura sia con css che con il filtro svg)


L’unico modo (finora) di avere un effetto sfocato sullo sfondo senza plugin js, è l’uso della proprietà -moz-element() in combinazione con il filtro sfocatura svg . Con -moz-element() puoi definire un elemento come immagine di sfondo di un altro elemento. Quindi applichi il filtro sfocatura svg . FACOLTATIVO: è ansible utilizzare jQuery per lo scorrimento se lo sfondo è in posizione fixed .

Guarda la mia demo qui

Capisco che sia una soluzione abbastanza complicata e limitata a FF ( element() applica solo a Mozilla al momento con la proprietà -moz-element() ) ma almeno c’è stato qualche sforzo in passato da implementare nei browser webkit e speriamo che sia sarà implementato in futuro .

È ansible utilizzare uno pseudo-elemento per posizionarsi come sfondo del contenuto con la stessa immagine dello sfondo, ma sfocato con il nuovo filtro CSS3.

Puoi vederlo in azione qui: http://codepen.io/jiserra/pen/JzKpx

L’ho fatto per personalizzare una selezione, ma ho aggiunto l’effetto sfocato dello sfondo.

Da Safari 9.0 è ansible utilizzare la proprietà filtro dello sfondo.

HTML

 
backdrop blur

CSS

 div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } 

o se hai bisogno di un colore di sfondo diverso per i browser senza supporto:

 div { background-color: rgba(255, 255, 255, 0.9); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5); } } 

JSFiddle

Mozilla Developer: filtro di sfondo

Posso usare

Esiste una tecnica semplice e molto comune utilizzando 2 immagini di sfondo: una nitida e sfocata. Imposta l’immagine nitida come sfondo per il corpo e quella sfocata come immagine di sfondo per il tuo contenitore. L’immagine sfocata deve essere impostata su posizionamento fisso e l’allineamento è perfetto al 100%. L’ho usato prima e funziona.

 body { background: url(yourCrispImage.jpg) no-repeat; } #container { background: url(yourBlurryImage.jpg) no-repeat fixed; } 

Puoi vedere un esempio funzionante nel seguente fiddle: http://jsfiddle.net/jTUjT/5/ . Prova a ridimensionare il browser e osserva che l’allineamento non fallisce mai.


Se solo l’ element() CSS element() fosse supportato da altri browser diversi da -moz-element() di Mozilla, -moz-element() creare effetti -moz-element() . Guarda questa demo con Mozilla .

Usa un elemento vuoto dimensionato per il contenuto come sfondo e posiziona il contenuto sopra l’elemento sfocato.

 #dialog_base{ background:white; background:rgba(255,255,255,0.8); position: absolute; top: 40%; left: 50%; z-index: 50; margin-left: -200px; height: 200px; width: 400px; filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } #dialog_content{ background: transparent; position: absolute; top: 40%; left: 50%; margin-left -200px; overflow: hidden; z-index: 51; } 

L’elemento di sfondo può trovarsi all’interno dell’elemento di contenuto, ma non viceversa.

 
Some Content

Questo non è facile se il contenuto non è sempre di dimensioni coerenti, ma funziona.

Potresti farlo attraverso iframe … Ho fatto qualcosa, ma il mio unico problema per ora è sincronizzare quei div a scorrere simultaneamente … è terribile, perché è come se carichi 2 siti web, ma l’unico modo in cui ho trovato … potresti anche lavorare con div e overflow, immagino …

In che modo lo vuoi dinamico? Se vuoi che il popup si associ con successo allo sfondo, devi creare due sfondi. Richiede sia l’uso di element() o -moz-element() sia un filtro (per Firefox, usa un filtro SVG come filter: url(#svgBlur) poiché Firefox non supporta -moz-filter: blur() ?). Funziona solo con Firefox al momento della scrittura.

Vedi la demo qui.

Devo ancora creare una semplice demo per mostrare come è fatta. Sei il benvenuto per visualizzare la fonte.