HTML – 如何保持容器内的CSS背景图像模糊？

发布时间：2020-12-14 23:06:30 所属栏目：资源来源：网络整理

导读：当我模糊图像时,它会溢出父容器,甚至指定要隐藏的溢出. 有没有办法将模糊的边缘保持在尺寸内？图像需要是css背景而不是标签内部示例不起作用： .box{ width: 300px; height: 300px; border: 1px solid red; overflow: hidden;}.blur{ width: 100%; height:

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

图像需要是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/

最佳答案

它可以通过对子元素应用边距并溢出：隐藏到父元素来实现.

.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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!