Sfocare una porzione specifica di un'immagine di sfondo

Question

Diciamo che il mio sito è organizzato in questo modo in termini di livelli.

• immagine di sfondo (background-size:cover;)
• 500 x 500 div con uno sfondo bianco semi-trasparente.
• Contenuto all'interno del div.

Quello che mi piacerebbe è che l'area sotto il div (sull'immagine di sfondo) sia sfocata. Il mio problema è che con diverse dimensioni dello schermo, non posso avere l'immagine di sfondo "pre-sfocato" perché quel div non sarà sempre allineato con lo sfondo.

Quindi la mia domanda è: è possibile sfocare al volo una porzione specifica di un'immagine di sfondo, magari definendo la regione come farei per il div? Ad esempio position:absolute; top:45% right:0; Oppure quali sono le mie migliori opzioni per il cross-browser. CSS o altro saggio, non importa.

Grazie

---

Su un lato nota ho pensato di avere un div inbetween lo sfondo e il già parlato div un'immagine di sfondo con lo stesso di quello dietro di esso, ma impostato il suo sfondo posizione per abbinare il div in primo piano e basta sfocarlo. Un po 'come ingrandire una foto in programmi come ps e la casella nel navigatore si riferisce solo alla parte dell'immagine che viene mostrata.

Answer 1

questo può essere un po 'pesante per quello che stai cercando di fare, ma si potrebbe usare Blur.js

$('.target').blurjs({ 
    source: 'body', 
    radius: 10, 
}); 

in caso di necessità per sfocare più dello sfondo, cassa:
https://stackoverflow.com/a/17134789/1947286

Answer 2

È possibile sovrapporre un'immagine a un'altra (utilizzando div s) e sfocare la sovrapposizione.

<div style="position: relative; background: URL(...)"> 

<div style="position: absolute; background: URL(...); 
     top: ...; left: ...; width: ...; height: ...; filter: blur(3px)"> 

Aggiornamento: Qui è in perfezione: http://css-tricks.com/blurry-background-effect/