如何让css背景图像在容器内模糊？

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）的作品似乎会触发适当的效果。尼斯。

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