Sfoca il contenuto dietro un div utilizzando CSS3

Ho riscontrato un problema con l'applicazione di sfocatura sullo sfondo di elementi assoluti/fissi, in quanto non sembra offuscare il contenuto principale della pagina, ma solo il contenuto dell'elemento assoluto stesso . Al momento ho lo stile per il mio avviso come segue:Sfoca il contenuto dietro un div utilizzando CSS3

.alert-wrap { 
    position: fixed; 
    z-index: 10; 
    right: 0; 
    bottom: 0; 
} 

.alert-wrap .alert { 
    display: block; 
    background-color: rgba(215, 44, 44, 0.5); 
    margin: 0 15px 15px 0; 
    position: relative; 
} 

.alert-wrap .alert:before { 
    content: ""; 

    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: blur(10px); 

}

Sto cercando di avere questo sfocare lo sfondo dell'elemento di allarme, rendendo il contenuto principale dietro di esso sembra offuscata (applicando maggiore attenzione per l'elemento in sé) , ma non sono riuscito a trovare nulla nemmeno confermando che questo problema esiste del tutto.

flusso documento HTML è il seguente: ad esempio

<html> 
    <head> 
     <!-- Header Stuff Deleted --> 
    </head> 

    <body> 
     <div class='alert-wrap'> 
      <div class='alert'> 
       <div class='head'> 
        Notifications 
       </div> 
       <div class='body'> 
        Alert content here 
       </div> 
      </div> 
     </div> 

     <?php 
      //constructing navbar 
     ?> 

     <div class='content'> 
      Some content here 
     </div> 

     <?php 
      //constructing footer 
     ?> 
    </body> 
</html>

Image:

example

fonte

2015-10-21 Necrone

Mostrare il codice HTML. – makshh

@makshh HTML aggiunto – Necrone

Hai un problema, perché non hai applicato alcuno sfondo all'elemento sfocato, quindi non c'è nulla da sfocare. – makshh

ho aggiornato questo per i suoi commenti su sfocatura il contenuto ... questo è meglio gestita like this.

Ciò offuscherà lo sfondo e tutto il contenuto, ma non l'avviso.

HTML:

<div id="alert"> 
    Lorum Ipsum Delorum Alert! 
</div> 

<div class="content" id="example"> 
    Blah Blah Blah Blah Blah Blah Blah Blah Blah 

    <div onclick="document.getElementById('example').className='alerting';document.getElementById('alert').style.display='block';">Go</div> 
</div>

CSS

.content { 

} 

.alerting { 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    -o-filter: blur(10px); 
    -ms-filter: blur(10px); 
    filter: blur(10px); 
} 

#alert { 
    display: none; 
    width: 300px; 
    height: 100px; 
    position: fixed; 
    top: 100px; 
    left: 0; 
    text-align: center; 
    width: 100%; 
}

fonte

2015-10-21 19:40:32 Fenton

In realtà sto cercando di sfocare il contenuto che è sotto il mio avviso per mettere più attenzione sul avviso stesso, ho visto questa soluzione un paio di volte durante la ricerca, grazie comunque. – Necrone

Ho aggiornato per sfocare tutti i contenuti tranne l'avviso. – Fenton

Non esattamente, aggiungerò alcune immagini all'OP per renderlo più chiaro spero – Necrone

Questo suona come un duplicato di this question. Il filtro sfocatura CSS si applica all'elemento stesso; tuttavia background-filter era recently introduced in the webkit nightly. Per un fallback che funziona nei browser correnti, anche se si utilizza la tela, selezionare this answer.

fonte

2015-10-21 21:14:00 Dre

Sfoca il contenuto dietro un div utilizzando CSS3

risposta

Problemi correlati