当我模糊图像时,它会溢出父容器,甚至指定要隐藏的溢出.
有没有办法将模糊的边缘保持在尺寸内？
图像需要是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");
}
最佳答案
它可以通过对子元素应用边距并溢出：隐藏到父元素来实现.
.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
