Question

所以我用background-size：cover设置了一个背景img。到目前为止工作。但是当我添加模糊时，显然会失去它很难。我怎么能消除模糊的边缘？也许背景必须按比例放大，然后切断一些溢出：隐藏？

我会使用带溢出的包装div：隐藏在img周围，但后来我不能使用background-size：cover，对吗？

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，因为它会裁剪bluring-area。你发现自己和你在同一个地方））

使用:after。

这不是一个非常美丽的解决方案，但是......

你可以看一下：

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

可能对你有用......

模糊背景图像时保留硬边：尺寸：封面

1 个答案: