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 in contesti Backbone.js :

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

Voglio applicare un filtro di sfocatura CSS 3 solo allo 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);

appena sotto background-imagenel mio CSS, modella l'intera pagina, anziché solo lo sfondo. C'è un modo per selezionare solo l'immagine e applicare il filtro a quello? In alternativa, c'è un modo per disattivare la sfocatura per ogni altro elemento della pagina?

Dai un'occhiata a questa penna .

Dovrai utilizzare due contenitori diversi, uno per l'immagine di sfondo e l'altro per i tuoi contenuti.

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

Entrambi sono posizionati con position: fixede left: 0; right: 0;. La differenza nella loro visualizzazione deriva dai z-indexvalori 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('https://i.imgur.com/lL6tQfy.png');
  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 di Lorem Ipsum .

Aggiornare

Grazie a Matthew Wilcoxson per una migliore implementazione usando .content:before http://codepen.io/akademy/pen/FlkzB

penna

Abolire la necessità di un elemento aggiuntivo, oltre a rendere il contenuto adatto al flusso del documento anziché essere fisso / assoluto come altre soluzioni.

Raggiunto utilizzando

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

È necessario l'overflow automatico, altrimenti lo sfondo verrà spostato di alcuni pixel nella parte superiore.

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, usa una larghezza e un'altezza di 110%e una sinistra e una cima di -5%. Ciò aumenterà un po 'i tuoi sfondi, ma non dovrebbe esserci alcuna perdita di colore dai bordi.

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

Come indicato in altre risposte, ciò può essere ottenuto con:

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

Puoi anche usare backdrop-filter

C'è una proprietà supportata chiamata backdrop-filter, ed è attualmente supportata in Chrome 76, Edge , Safari e iOS Safari (vedi statistiche su caniuse.com ).

Da Mozilla devdocs :

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

Vedi caniuse.com per le statistiche sull'utilizzo.

Lo useresti così:

.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) : Chromium verrà fornito con backdrop-filterabilitato per impostazione predefinita nella versione 76 che è prevista per il 30/07/2019 .

Aggiornamento (01/06/2019) : il team di Mozzilla Firefox ha annunciato che presto inizierà a lavorare per implementarlo.

Aggiornamento (21/05/2019) : Chromium appena annunciato backdrop-filter è disponibile in Chrome Canary senza abilitare il flag "Abilita funzionalità piattaforma Web sperimentale". Ciò significa che backdrop-filterè molto vicino all'implementazione su tutte le piattaforme Chrome.

Per fare ciò è necessario strutturare nuovamente il codice HTML . Devi sfocare l'intero elemento per sfocare lo sfondo. Quindi, se vuoi sfocare solo lo sfondo, deve essere il suo elemento.

Si prega di controllare il codice qui sotto: -

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <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>
</div>

Quella che segue è una soluzione semplice per i browser moderni in puro CSS con uno pseudo elemento "prima", come la soluzione di Matthew Wilcoxson.

Per evitare la necessità di accedere allo pseudo elemento per modificare l'immagine e altri attributi in JavaScript, basta usare inheritcome valore e accedervi tramite l'elemento genitore (qui body).

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

Nella .contentscheda in CSS cambiarlo in position:absolute. Altrimenti, la pagina renderizzata non sarà scorrevole.

Sebbene tutte le soluzioni menzionate siano molto intelligenti, sembra che abbiano provato problemi minori o potenziali effetti a catena con altri elementi della pagina.

Alla fine per risparmiare tempo sono semplicemente tornato alla mia vecchia soluzione: ho usato Paint.NET e sono andato su Effetti, Sfocatura gaussiana con un raggio da 5 a 10 pixel e l' ho appena salvato come immagine della pagina. :-)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

MODIFICARE:

Finalmente ho funzionato, ma la soluzione non è affatto semplice! Vedere qui:

• filtro: sfocatura (1px); non funziona in Firefox, Internet Explorer e Opera

Tutto ciò di cui hai effettivamente bisogno è "filtro":

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

Naturalmente, questa non è una soluzione CSS, ma puoi usare il CDN Proton con filter:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

È da https://developer.wordpress.com/docs/photon/api/#filter

Non ho scritto questo, ma ho notato che c'era un polyfill per il parzialmente supportato backdrop-filterusando il compilatore CSS SASS, quindi se hai una pipeline di compilazione può essere ottenuto bene (usa anche TypeScript):

https://codepen.io/mixal_bl4/pen/EwPMWo

Questa risposta è per un layout di scheda orizzontale Material Design con altezza dinamica e un'immagine.

Per evitare la distorsione dell'immagine dovuta all'altezza dinamica della carta, è possibile utilizzare un'immagine segnaposto di sfondo con sfocatura per regolare le variazioni di altezza.

Spiegazione

• La scheda è contenuta in un wrapper<div> con classe , che è un flexbox.
• La scheda è composta da due elementi, un'immagine che è anche un collegamento e contenuto.
• Il collegamento <a>, classe di collegamento , viene posizionato relativa .
• Il collegamento è costituito da due sotto-elementi, una sfocatura di<div> classe segnaposto e una foto di classe che è l'immagine chiara.<img>
• Entrambi sono posizionati in modo assoluto e hanno width: 100%, ma la foto di classe ha un ordine di pila più alto, cioè z-index: 2, che la posiziona sopra il segnaposto.
• L'immagine di sfondo per il segnaposto sfocato viene impostata tramite stile in linea nell'HTML.

Codice

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

Ora questo diventa ancora più semplice e flessibile utilizzando CSS GRID. Devi solo sovrapporre lo sfondo sfocato (imgbg) con il testo (h2)

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

e il css:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Senza usare la pseudo-classe da

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

Se vuoi che il contenuto sia scorrevole, imposta la posizione del contenuto su assoluto:

content {
   position: absolute;
   ...
}

Non so se questo fosse solo per me, ma in caso contrario è la soluzione!

Inoltre, poiché lo sfondo è fisso, significa che hai un effetto "parallasse" ! Quindi, non solo questa persona ti ha insegnato come creare uno sfondo sfocato, ma è anche un effetto di sfondo di parallasse!