Come applicare un filtro CSS a un'immagine di sfondo

Question

Ho un file JPEG che sto usando come immagine di sfondo per una pagina di ricerca, e sto usando CSS per impostarlo perché sto lavorando all'interno backbone.js Contexts:

background-image: url("whatever.jpg");

.

Voglio applicare un filtro sfocatura CSS 3 solo sullo sfondo, ma non sono sicuro di come modellare solo quell'elemento.Se provo:

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

.

Giusto sotto background-image nel mio CSS, stili tutta la pagina, piuttosto che lo sfondo.C'è un modo per selezionare solo l'immagine e applicare il filtro a questo?In alternativa, c'è un modo per disattivare la sfocatura per ogni altro elemento sulla pagina?

Answer 1

Dai un'occhiata a questo penna .

Dovrai usare due diversi contenitori, uno per l'immagine di sfondo e l'altro per il tuo contenuto.

Nell'esempio, ho creato due contenitori, .background-image e .content.

Entrambi sono posizionati con position: fixed e left: 0; right: 0;. La differenza nella visualizzazione viene fornita dai valori z-index che sono stati impostati in modo diverso per gli elementi.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

.

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

.

Scuse per il testo lorem ipsum .

Aggiorna

Grazie a Matthew wilcoxson per una migliore implementazione utilizzando .content:before http://codepen.io/akademy/pen/flkzb

Answer 2

Pen

Abolire la necessità di un elemento extra, insieme a rendere il contenuto in forma all'interno del flusso di documenti anziché essere fisso / assoluto come altre soluzioni.

ottenuto utilizzando

.content {
  overflow: auto;
  position: relative;
}

.

Overflow Auto è necessario, altrimenti lo sfondo verrà compensato da alcuni pixel in alto.

Dopo questo hai semplicemente bisogno

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

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

.

Modifica Se sei interessato a rimuovere i bordi bianchi ai bordi, utilizzare una larghezza e un'altezza di 110% e una sinistra e la parte superiore del -5%.Questo amplierà i tuoi sfondi un po '- ma non dovrebbe esserci un sanguinamento a colori solido dai bordi.

Penna aggiornata qui: https://codepen.io/anon/pen/qgyewb -Grazie Chad Fawcett per il suggerimento.

Answer 3

Come indicato in altre risposte questo può essere ottenuto con:

.
• una copia dell'immagine sfocata come sfondo.
• Un elemento pseudo che può essere filtrato quindi posizionato dietro il contenuto.

Puoi anche usare backdrop-filter C'è una proprietà supportata chiamata backdrop-filter ed è attualmente supportato in Chrome 76, Edge , Safari e IOS Safari (vedi caniuse.com per le statistiche).

Da mozilla devdocs :

.

La proprietà del filtro del contesto fornisce effetti come sfocatura o colore che spostano l'area dietro un elemento, che può quindi essere visto attraverso quell'elemento regolando la trasparenza / opacità dell'elemento.

Vedi caniuse.com per le statistiche sull'utilizzo.

Lo useresti come:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

.

<div class="background background-filter"></div>

.

Aggiornamento (12/06/2019) : il cromo verrà spedito con backdrop-filter abilitato per impostazione predefinita nella versione 76 quale è dovuto 30/07/2019 .

Aggiornamento (01/06/2019) : The Mozzilla Firefox Team ha annunciato inizierà a lavorare per implementarti presto.

Aggiornamento (21/05/2019) : Chromium Appena annunciato backdrop-filter è disponibile in Chrome Canary senza abilitare "Abilita la bandiera della piattaforma web sperimentale". Questo significa backdrop-filter è molto vicino ad essere implementato su tutte le piattaforme Chrome.