图像上的CSS3模糊滤镜扩展超出原始宽度

Question

我正在对图像应用CSS3模糊滤镜，但意外的是模糊效果超出了图像的原始大小(至少在Webkit浏览器上)。
我用了overflow: hidden;，但它不起作用。
下面是我的代码:

HTML:

<div class='container'>
    <img src='img.jpg' class='blur' />
</div>

CSS:

body{
    padding:0px;
    margin: 0px;
    background: #1f1f1f;
}
.blur{
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);    
}
.container {
    border:1px solid #fff;
    margin:40px;
    float:left;
    overflow: hidden;
}

这是一把小提琴
什么好主意吗?

Answer 1

给img一个负的margin，如

img {
    margin: -5px;
}

…将掩盖泄漏。您可以使用margin。

小提琴

编辑:为什么会发生

应用模糊…你通过任何数量的px, em等来混合你的元素，例如5px。为了创建这个模糊，元素将被扩展/特征，超出其当前大小。

因此，应用负边距本质上是"剪辑"大小，并阻止它之外的任何东西工作。"裁剪"是一种方法，另一种方法是用div包装元素，声明height和width，并应用overflow: hidden。这将屏蔽溢出

Answer 2

由于我在Safari 8上遇到了完全相同的错误，我想我应该发布我的解决方案。

在上面的例子中，你只需要添加

-webkit-filter:blur(0px);

到容器。

Answer 3

模糊效果总是超过width。

在您的情况下，您可以使用以下技术之一来解决问题-

1. 尝试设置.container的width，并使用CSS calc()函数从img的高度和宽度减少15px + 15px。
2. 或者你可以在img
中添加一个15px的padding

DEMO第二解

Answer 4

我还不太了解"模糊"，但我猜它会在每个方向上扩展/模糊15px的边缘(在这种情况下)。当你添加padding: 15px;对于您的。container类，它看起来很好:

.container {
    border:1px solid #fff;
    margin:40px;
    float:left;
    overflow: hidden;
    padding: 15px;
}

这里是小提琴

Answer 5

将小于图像的height和width属性放到容器上。比图片小1px似乎效果不错。

CSS:

.container {
    /* ... */
    width:399px;
    height: 223px;
}

JSFiddle

Answer 6

如果你的剪贴框。outer周围的背景可以是实心的，你可以用投影来欺骗。http://jsfiddle.net/ffghjkbj/

.overflow{
    width: 200px;
    height: 200px;
    overflow: visible;
    background-color: transparent;
    position: relative;
    z-index: 4;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    margin: 30px;
}
.overflow:after {
    content: "";
    position: absolute;
    display: block;
    box-shadow: 0 0 0 40px #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.inner{
    width: 100%;
    height: 100%;
    background: green;
    filter: blur(10px);
    -webkit-filter: blur(0px);
    transition: all 0.5s ease-in-out;
    -webkit-transform: scale(1.2 , 1.2);
    -webkit-transform-origin: 50% 50%;
    z-index: -1;
    position: absolute;
    -webkit-backface-visibility: hidden;
    margin: 0px;
    padding: 10%;
    box-sizing: border-box;
}
.overflow:hover .inner{
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

如果你的背景不是实心的，你可以使用border-image，与背景相同的图像，来伪造效果，这几乎与使用中间有孔的png蒙版，而不是背景，并将带蒙版的伪对象移动到前面的z-index相同。

你看到的模糊边界是在应用模糊之前，由.inner元素被剪辑(由它的父元素)生成的。这绝对是一种不会在渲染隐藏区域时浪费能量的加速方式。

所以。inner元素已经在父元素的边缘被剪切，当模糊应用到它，而模糊的帧实际上是外部的空白区域，在模糊的图像内部流出。模糊不会像我们想象的那样应用于整个内部元素，如果元素在"内部"或"后面"。只到可见部分。(这就是为什么上面建议的超大的。inner元素不起作用的原因)。

这并不明显，因为子元素"在"或"在"父元素"后面"的想法在我们的脑海中。对象只是碰巧在父坐标处被剪切，但实际上在父坐标的前面。