如何保持容器内的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指出的那样,它与此处使用的技术相同:使用CSS3滤镜模糊定义的边缘