Como aplicar um filtro CSS a uma imagem de fundo

https://stackoverflow.com//questions/20039765

21-12-2019
|

Pergunta

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 nele Backbone.js contextos:

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

Quero aplicar um filtro de desfoque CSS 3 apenas para o plano de fundo, mas não tenho certeza de 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-image no 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 ela?Como alternativa, existe uma maneira de desativar o desfoque para todos os outros elementos da página?

Solução

Veja isso caneta.

Você terá que usar dois containers diferentes, um para a imagem de fundo e outro para o seu conteúdo.

No exemplo, criei dois contêineres, .background-image e .content.

Ambos são colocados com position: fixed e left: 0; right: 0;.A diferença em exibi-los vem do z-index valores que foram definidos de forma diferente para os elementos.

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

Desculpas pelo Lorem Ipsum Texto.

Atualizar

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

Outras dicas

caneta

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

Alcançado usando

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

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

Depois disso você só 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 nas bordas, use uma largura e altura de 110% e uma esquerda e superior de -5%.Isso ampliará um pouco seus planos de fundo - mas não deve haver nenhuma cor sólida vazando pelas bordas.

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

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

Uma cópia da imagem desfocada como plano de fundo.
Um pseudoelemento 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 é suportado no Chrome 76, Borda, Safari e iOS Safari (consulte caniuse. com para estatísticas).

De Devdocs da Mozilla:

A propriedade background-filter fornece efeitos como desfoque ou mudança de cor na área atrás de um elemento, que pode então ser visto através desse elemento ajustando a transparência/opacidade do elemento.

Ver 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/12/2019):O Chromium será enviado com backdrop-filter habilitado por padrão na versão 76 que está previsto para 30/07/2019.

Atualização (01/06/2019):A equipe Mozzilla Firefox foi anunciado começará a trabalhar na implementação disso em breve.

Atualização (21/05/2019):Cromo acabei de anunciar backdrop-filter está disponível no Chrome Canary sem ativar o sinalizador "Ativar recursos experimentais da plataforma da Web".Isso significa backdrop-filter está muito próximo de ser implementado em todas as plataformas Chrome.

Você precisa reestruturar seu HTML para fazer isso.Você tem que desfocar todo o elemento para desfocar o fundo.Então se você quiser desfocar apenas o fundo, tem que ser um elemento próprio.

Por favor, 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 está uma solução simples para navegadores modernos em CSS puro com um pseudoelemento 'antes', como a solução de Matthew Wilcoxson.

Para evitar a necessidade de acessar o pseudoelemento para alteração da imagem e outros atributos em JavaScript, basta usar inherit como o 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 */
}

No .content aba em CSS mude para position:absolute.Caso contrário, a página renderizada não poderá ser rolada.

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

No final, para economizar tempo, simplesmente voltei à minha solução antiga:eu usei Paint.NET e fui para Efeitos, Desfoque Gaussiano com raio de 5 a 10 pixels e apenas salvei 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 é nada simples!Veja aqui:

filtro:desfoque(1px);não funciona no Firefox, IE e Opera

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

Claro, esta 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-filter usando o compilador CSS SASS, portanto, se você tiver um pipeline de compilação, isso pode ser feito muito bem (ele também usa TypeScript):

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

div {
    background: inherit;
    width: 250px;
    height: 350px;
    position: absolute;
    overflow: hidden;  /* Adding overflow hidden */
}

div:before {
    content: ‘’;
    width: 300px;
    height: 400px;
    background: inherit;
    position: absolute;
    left: -25px;  /* Giving minus -25px left position */
    right: 0;
    top: -25px;   /* Giving minus -25px top position */
    bottom: 0;
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
    filter: blur(10px);
}

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

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

Explicação

O cartão está contido em um <div> com classe embrulho, que é um flexbox.
O cartão é composto de dois elementos, uma imagem que também é um link e conteúdo.
A ligação <a>, aula link, está posicionadorelativo.
O link consiste em dois subelementos, um espaço reservado <div> aula borrão e um <img> aula foto qual é a imagem clara.
Ambos estão posicionados absoluto e tem width: 100%, mas classe foto tem uma ordem de pilha mais alta, ou seja, z-index: 2, que o coloca acima do espaço reservado.
A imagem de fundo do espaço reservado desfocado é definida via 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 tornou ainda mais simples e flexível usando CSS GRID. Você só precisa sobrepor o fundo desfocado (imgbg) com o 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;
      }

Se você deseja que o conteúdo seja rolável, defina a posição do conteúdo como absoluta:

content {
   position: absolute;
   ...
}

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

Também como o plano de fundo é fixo, significa que você tem um "paralaxe" efeito!Então agora, essa pessoa não apenas te ensinou como fazer um fundo desfocado, mas também é um efeito de fundo de paralaxe!

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow

Como aplicar um filtro CSS a uma imagem de fundo

Atualizar

Você também pode usar backdrop-filter

Explicação

Código

Você também pode usar `backdrop-filter`