当我模糊图像时,它会溢出父容器,甚至指定要隐藏的溢出.
有没有办法将模糊的边缘保持在尺寸内?
图像需要是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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。