CSS使用绝对div模糊并保留锐边

Question

如果img未设置为绝对,则此工作正常:

div img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}
div {
    margin: 20px;
    overflow: hidden;
}

工作正常的例子:http://jsfiddle.net/ThinkingStiff/b8fLU/(取自另一个问题)

但是,如果我想用背景图像的绝对div做这个怎么办？

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

#background {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    filter: blur(5px) brightness(0.75);
    -webkit-filter: blur(5px) brightness(0.75);
    -moz-filter: blur(5px) brightness(0.75);
    -ms-filter: blur(5px) brightness(0.75);
    -o-filter: blur(5px) brightness(0.75);
    position: absolute;
    background-image: url('images/bg.png');
    z-index: 1;
}

如何使用上面的设置实现相同的效果(模糊但边缘锐利)？

Answer 1

将您的blur元素放在这样的容器中:

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

然后而不是像这样使用height:100%和width:100%使用:

.container{
    position:relative;
    width:300px;          /* this is an example */
    height:300px;         /* this is an example */
    overflow:hidden;
}

#background {
    left:-15px;
    right:-15px;
    top:-15px;
    bottom:-15px;
    /* other styles */
}

您需要15px从元素的每一侧移除(或更多/更少).

演示 -完整的演示

Answer 2

我一直在为此看到的答案的另一种选择，我认为非常聪明，是使用 svg 来模糊img. 在这个 codepen https://codepen.io/johndjameson/full/xVjgPy/中对它的描述非常好，所以我将把它复制并粘贴到这里。希望它在这个线程上更容易访问。

把它们加起来。你像这样制作了一个不可见的 svg 元素

 <svg class='hideSvgSoThatItSupportsFirefox'>
  <filter id='sharpBlur'>
    <feGaussianBlur stdDeviation='3'></feGaussianBlur>
    <feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0'></feColorMatrix>
    <feComposite in2='SourceGraphic' operator='in'></feComposite>
  </filter>
</svg>

然后通过链接到不可见的 svg 元素使用 CSS 进行模糊处理

.svgBlur { filter: url("#sharpBlur"); }

最后你只需添加svgBlur到img你想要模糊

<img class='svgBlur' src='https://unsplash.it/360/240?image=511'>

就是这样！对我来说真的很好。

 <svg class='hideSvgSoThatItSupportsFirefox'>
  <filter id='sharpBlur'>
    <feGaussianBlur stdDeviation='3'></feGaussianBlur>
    <feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0'></feColorMatrix>
    <feComposite in2='SourceGraphic' operator='in'></feComposite>
  </filter>
</svg>

.svgBlur { filter: url("#sharpBlur"); }