使用尺寸模糊背景图像时保留硬边缘：覆盖答案

【问题标题】：Retain hard edge when blurring background image with size: cover使用尺寸模糊背景图像时保留硬边缘：覆盖
【发布时间】：2013-02-04 11:58:12
【问题描述】：

所以我用 background-size:cover 设置了一个背景img。工作至今。但是当我添加模糊时，它显然会失去它的硬色。我怎样才能去除模糊的边缘？也许背景必须按比例放大，然后用一些溢出切断：隐藏？

我会使用带有溢出的包装 div：隐藏在 img 周围，但是我不能使用 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);
}

【问题讨论】：

标签： background-image blur css

【解决方案1】：

第二个链接失效了，不知道应该怎么弄。

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

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

但是你不能在那之后使用overflow:hidden，因为它会裁剪模糊区域。然后你发现自己在原来的地方))

使用:after。

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

你可以看这里：

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

也许对你有用……

【讨论】：