5

Eu tenho uma div que está com filter:blur(), porém reparei que o blur meio que é para dentro do elemento. O que quero dizer é que ao chegar no limite do box-model a imagem de background começa a desaparecer antes da borda, dando impressão que o fundo não ocupa a totalidade do elemento.

inserir a descrição da imagem aqui

Repare na imagem acima, veja que a imagem já está desaparecendo antes mesmo de chegar na borda.

Repare no código que os dois .box tem o mesmo tamanho, e veja como o blur não completa o conteúdo todo. Existe alguma forma de corrigir esse problema?

div {float:left}
.box {
  width: 300px;
  height: 300px;
  background-image: url(https://placecage.com/300/300);
  filter: blur(5px);
}
.box2 {
  width: 300px;
  height: 300px;
  background-color: red;
}
<div class="box"></div>
<div class="box2"></div>

A intenção é que o box fique assim, com 100% do conteúdo de background com blur

inserir a descrição da imagem aqui

1 Resposta 1

4

Quando você aplica o blur à div, não vejo como evitar que as bordas fiquem desfocadas. Uma forma é inserir a imagem de fundo em um elemento filho (um span, por exemplo) e aplicar overflow: hidden na div. Assim a imagem de fundo não irá extrapolar a área da div:

.box {
   position: relative;
   width: 300px;
   height: 300px;
   overflow: hidden;
   background-color: blue;
}

.box span{
   display: inline-block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   background-image: url(https://placecage.com/300/300);
   filter: blur(5px);
   transform: scale(1.07);
}
<div class="box"><span></span></div>

6
  • Sam acho que o caminho é por ai talvez, mas ainda não ficou legal, veja que colocando uma cor de BG, ainda fica uma contaminação da cor do fundo na borda da imagem prntscr.com/mzltxl sera que ainda existe algum ajuste nesse código que pode melhorar esse problema?
    – hugocsl
    18/03/2019 às 17:47
  • Não entendi :D... se coloccar um background-color, vc diz?
    – Sam
    18/03/2019 às 17:49
  • Não não, na verdade estou falando que o blur ainda está afetando a borda da imagem. Se vc colocar uma cor no body vc vai ver que essa cor fica visível por baixo da imagem, o blur continua "comendo" um pedaço para dentro do background do elemento, repare na segunda imagem da pergunta, veja que o blur pega totalmente
    – hugocsl
    18/03/2019 às 17:51
  • Aí teria que aumentar um pouco a imagem com transform: scale (editei a resposta)
    – Sam
    18/03/2019 às 17:54
  • Agora sim! Eu tinha tentado com um margin:-5px; e tb tinha dado certo, mas com scale talvez seja até melhor, pq ai a renderização pode ter auxilio da GPU, não lembro se o filter por si só já ativa a GPU... Em todo caso valeu! Amanha eu aceito pq hj já bati no teto haha :D
    – hugocsl
    18/03/2019 às 18:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .