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