Question

当我模糊图像时，它会溢出父容器，甚至指定要隐藏的溢出。有没有办法将模糊的边缘保持在尺寸内？

图片需要是css背景而不是标签

示例不起作用：

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}

.blur{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-filter: blur(20px);
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}

http://jsfiddle.net/tMjsJ/1/

Answer 1

可以通过将margin应用于子元素并将overflow:hidden应用于父元素来实现。

.box {
    overflow: hidden;
    margin:5px;
}

.blur {
    -webkit-filter: blur(20px);
    margin: -5px 0 0 -5px;
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
    height:300px;
    width:300px;
}

请在此处查看示例：http://jsfiddle.net/n1ck/tMjsJ/5/

正如Joshua指出的那样，它与此处使用的技术相同：Defined Edges With CSS3 Filter Blur

Answer 2

所以，显然，这似乎不适用于背景图像。非常有趣的发现:)这里展示了一个类似但不精确的帖子：

Defined Edges With CSS3 Filter Blur

我想如果你想要达到同样的效果，尝试使用带背景图像的div更改为图像本身，宽度/高度为100％。

编辑：查看@ N1ck的答案。应用负边距（甚至-1px）工作似乎会触发正确的效果。好的。

另外 - 为了避免出血的背景颜色（白色），或至少更好地管理它，请尝试设置除图像之外的背景颜色。

如何保持容器内的CSS背景图像模糊？

2 个答案: