Eu tenho um arquivo JPEG que estou usando como imagem de fundo para uma página de pesquisa e estou usando CSS para defini-lo porque estou trabalhando nos contextos Backbone.js :

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

Quero aplicar um filtro de desfoque CSS 3 apenas ao plano de fundo, mas não sei como estilizar apenas esse elemento. Se eu tentar:

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

logo abaixo background-imageno meu CSS, ele estiliza a página inteira, em vez de apenas o plano de fundo. Existe uma maneira de selecionar apenas a imagem e aplicar o filtro a isso? Como alternativa, existe uma maneira de desativar o desfoque de todos os outros elementos da página?

Confira esta caneta .

Você precisará usar dois contêineres diferentes, um para a imagem de plano de fundo e o outro para o seu conteúdo.

No exemplo, eu criei dois contêineres .background-imagee .content.

Ambos são colocados com position: fixede left: 0; right: 0;. A diferença em exibi-los deriva dos z-indexvalores que foram definidos de maneira diferente para os elementos.

.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>

Desculpas pelo texto Lorem Ipsum .

Atualizar

Agradecemos a Matthew Wilcoxson por uma melhor implementação usando .content:before http://codepen.io/akademy/pen/FlkzB

caneta

Abolir a necessidade de um elemento extra, além de ajustar o conteúdo ao fluxo do documento, em vez de ser fixo / absoluto, como outras soluções.

Alcançado usando

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

O estouro automático é necessário, caso contrário, o fundo será deslocado por alguns pixels na parte superior.

Depois disso, você simplesmente precisa

.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);
}

EDITAR Se você estiver interessado em remover as bordas brancas das bordas, use a largura e a altura e as partes 110%esquerda e superior-5% . Isso aumentará um pouco seus fundos - mas não deve haver cores sólidas nas bordas.

Caneta atualizada aqui: https://codepen.io/anon/pen/QgyewB - Obrigado Chad Fawcett pela sugestão.

Conforme declarado em outras respostas, isso pode ser alcançado com:

• Uma cópia da imagem borrada como plano de fundo.
• Um pseudo elemento que pode ser filtrado e posicionado atrás do conteúdo.

Você também pode usar backdrop-filter

Existe uma propriedade suportada chamada backdrop-filter, e atualmente é suportada no Chrome 76, Edge , Safari e iOS Safari (consulte caniuse.com para estatísticas).

Nos devdocs do Mozilla :

A propriedade filtro de pano de fundo fornece efeitos como desfoque ou mudança de cor na área atrás de um elemento, que podem ser vistos através desse elemento, ajustando a transparência / opacidade do elemento.

Veja caniuse.com para estatísticas de uso.

Você usaria assim:

.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>

Atualização (06/06/2019) : o Chromium é enviado com backdrop-filterativado por padrão na versão 76, com vencimento em 30/07/2019 .

Atualização ( 06/06/2019 ) : A equipe do Mozzilla Firefox anunciou que começará a trabalhar na implementação em breve.

Atualização (21/05/2019) : O Chromium acaba de anunciar backdrop-filter está disponível no chrome canary sem ativar o sinalizador "Ativar recursos experimentais da plataforma da Web". Isso significa que backdrop-filterestá muito perto de ser implementado em todas as plataformas chrome.

Você precisa reestruturar seu HTML para fazer isso. Você precisa desfocar todo o elemento para desfocar o fundo. Portanto, se você deseja desfocar apenas o fundo, ele deve ser seu próprio elemento.

Verifique o código abaixo: -

.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>

A seguir, é apresentada uma solução simples para navegadores modernos em CSS puro com um pseudo-elemento 'antes', como a solução de Matthew Wilcoxson.

Para evitar a necessidade de acessar o pseudo-elemento para alterar a imagem e outros atributos em JavaScript, basta usar inheritcomo valor e acessá-los através do elemento pai (aqui 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 */
}

Na .contentguia CSS altere-o para position:absolute. Caso contrário, a página renderizada não será rolável.

Embora todas as soluções mencionadas sejam muito inteligentes, todas pareciam ter problemas menores ou possíveis efeitos colaterais com outros elementos da página quando eu os experimentei.

No final, para economizar tempo, simplesmente voltei à minha solução antiga: usei o Paint.NET e fui para Effects, Gaussian Blur com um raio de 5 a 10 pixels e salvei-o como imagem da página. :-)

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;
}

EDITAR:

Finalmente consegui funcionar, mas a solução não é de maneira alguma direta! Veja aqui:

• filtro: desfoque (1 px); não funciona no firefox, IE e opera

Tudo o que você realmente precisa é de "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>

Obviamente, essa não é uma solução CSS, mas você pode usar o CDN Proton com filter:

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

É de https://developer.wordpress.com/docs/photon/api/#filter

Eu não escrevi isso, mas notei que havia um polyfill para o parcialmente suportado backdrop-filterusando o compilador CSS SASS; portanto, se você tiver um pipeline de compilação, ele poderá ser bem alcançado (ele também usa o TypeScript):

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

Esta resposta é para um layout de cartão horizontal de Material Design com altura dinâmica e uma imagem.

Para evitar distorção da imagem devido à altura dinâmica do cartão, você pode usar uma imagem de espaço reservado em segundo plano com desfoque para ajustar as alterações de altura.

Explicação

• O cartão está contido em um wrapper<div> com classe , que é um flexbox.
• O cartão é composto de dois elementos, uma imagem que também é um link e conteúdo.
• A ligação <a>, classe ligação , é posicionado em relação .
• O link consiste em dois subelementos, um desfoque de<div> classe de espaço reservado e uma foto de classe<img> que é a imagem clara.
• Ambos estão posicionados absolutos e têm width: 100%, mas a classe pic tem uma ordem de pilha mais alta, ou seja z-index: 2, que a coloca acima do espaço reservado.
• A imagem de plano de fundo do espaço reservado desfocado é definida no estilo embutido no HTML.

Código

.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>

Agora, isso se torna ainda mais simples e flexível usando CSS GRID. Você só precisa sobrepor o fundo manchado (imgbg) ao texto (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 o 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);
    }
}

Sem usar a pseudo-classe de

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 você deseja que o conteúdo seja rolável, defina a posição do conteúdo como absoluta:

content {
   position: absolute;
   ...
}

Eu não sei se isso foi só para mim, mas se não, essa é a solução!

Além disso, como o plano de fundo é fixo, significa que você tem um efeito de "paralaxe" ! Portanto, agora, essa pessoa não apenas ensinou como criar um fundo desfocado, mas também é um efeito de paralaxe!