6

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

图片需要作为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/

4

2 回答 2

9

它可以通过将 amargin应用于子元素和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指出的那样，它与此处使用的技术相同：使用 CSS3 过滤器模糊定义边缘

于 2013-03-08T03:08:25.377 回答
2

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

使用 CSS3 滤镜模糊定义的边缘

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

编辑：查看@N1ck 的答案。应用负边距（甚至 -1px）似乎可以触发适当的效果。好的。

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

于 2013-03-08T02:52:06.617 回答