使用尺寸模糊背景图像时保留硬边缘:封面

Question

所以我设置了一个背景图像，背景大小：封面。到目前为止有效。但是当我添加模糊时，它显然会失去它的硬性。如何去除模糊的边缘？也许背景必须放大，然后用一些溢出：隐藏来切断？

我会使用一个带有溢出：隐藏在 img 周围的包装div，但是我不能使用 background-size：cover，对吧？

这是它的外观：http://jsfiddle.net/RyQRY/

这就是它应该的样子：http://cl.ly/image/0B2f191p2m0i

.HTML

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

.CSS

#background {
    position: absolute;
    z-index: -999;
    top: 0px;
    height: 546px;
    width: 100%;
    background-image: url(../img/background.jpg);
    background-size: cover;
    -webkit-filter: blur(50px);
}

Answer 1

第二个链接已经死了，所以我不知道它应该如何。

但是，您可以隐藏模糊的边缘：

position: absolute;
    top: -25px;
    bottom: -25px;
    left: -25px;
    right: -25px;

但是之后你不能使用overflow:hidden，因为它会裁剪模糊区域。你发现自己在你所在的同一个地方））

使用:after .

这不是非常漂亮的解决方案，但是...

你可以看这里：

http://jsfiddle.net/RyQRY/10/

也许它对你有用...