图像上的 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;
}

这是一个 fiddle
有什么想法吗？

Answer 1

通过给img一个负的margin比如

img {
    margin: -5px;
}

... 将 overflow hidden 。您可以尝试使用 margin。

FIDDLE

编辑:为什么会这样

正在申请 blur ...您正在通过您声明的 px、em 等任意数量来混合您的元素，例如5 像素。为了创建这种模糊，元素将被扩展/特征化超出其当前大小的数量。

因此应用负边距本质上是“裁剪”大小并阻止它以外的任何东西起作用。 “剪辑”是一种方法，另一种方法是用 div 包装元素并声明 height 和 width 并应用 溢出:隐藏。这将掩盖溢出。