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

将height和width属性小于容器上的图像。 比图片小1px的尺寸似乎效果很好。

CSS：

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

的jsfiddle

Answer 3

模糊效果总是超出width 。

根据您的情况，您可以使用以下一种方法解决此问题：

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

第二解决方案的演示

Answer 4

我对“模糊”了解不多，但是我猜想它会向各个方向扩散/模糊15px的边缘（在这种情况下）。 当您添加填充时：15px； 到您的.container类，看起来不错：

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

这是小提琴

Answer 5

如果剪辑框.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);

}

如果背景不是实心的，则可以使用与背景具有相同图像的边框图像来伪造效果，这与使用中间带有孔的png蒙版几乎相同，而不是背景，然后使用z-index将带有蒙版的伪对象移到最前面。

应用模糊之前，.inner元素（由其父级）被裁剪，生成的边框模糊。 绝对是加速时不浪费功率渲染隐藏区域的一种方法。

因此，当对模糊对象应用.inner元素时，其内部边缘已被剪裁，而模糊帧实际上是模糊时图像内部渗入的外部空白区域。 模糊不会应用于整个内部元素，正如我们想象的那样，该元素是“内部”还是“内部”。 只是到可见部分。 （这就是为什么上面建议的超大.inner元素不起作用的原因）。

这不是很明显，因为在我们的脑海中想到了在其父元素“内部”或“后面”的子元素的想法。 对象只是碰巧被剪裁了，但实际上位于父对象的前部。

Answer 6

当我在Safari 8上遇到完全相同的错误时，我以为我应该发布解决方案。

在上面的示例中，您只需要添加

-webkit-filter:blur(0px);

到容器。