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;
}

...将隐藏溢出物。您可以使用margin。

FIDDLE

编辑：为什么会发生这种情况

应用blur ...您正在按照您声明的px，em等数量混合您的元素。 5px。为了创建这种模糊，元素将在当前大小之外的那个数量上扩展/使用。

因此，应用负边距基本上会“剪切”大小，并防止其外的任何内容起作用。 “剪切”是一种方法，另一种方法是使用div包装元素并声明height和width并应用overflow: hidden。这将掩盖溢出。

Answer 2

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

CSS：

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

JSFiddle

Answer 3

模糊效果总是超出width。

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

尝试使用CSS calc（）从width的高度和宽度设置.container的{{1}}并减少 15px + 15px 功能。
或者您只需向img

padding

15px

DEMO of 2nd solution

Answer 4

我不太了解＆＃34;模糊＆＃34;但是，我猜它在每个方向上扩散/模糊了15px（在这种情况下）的边缘。当你添加填充：15px;你的.container课看起来很好：

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

这是fiddle

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元素在应用模糊之前被CLIPPED（由其父级）生成的。绝对是加速不浪费渲染隐藏区域的方法。

因此，当对其应用模糊时，.inner元素在父级边缘处被剪切，并且模糊帧实际上是模糊时图像内部出现的空白区域。如果元素是“内部”或“后面”，模糊不会应用于整个内部元素。只是到了可见的部分。（这就是为什么上面建议的超大.inner元素不起作用的原因。）

这并不明显，因为我们认为儿童元素在其内部“内部”或“后面”的想法。对象恰好被剪切在不合适的坐标处，但实际上是父对象的前方。

Answer 6

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

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

-webkit-filter:blur(0px);

到容器。

图像上的CSS3模糊滤镜扩展到原始宽度以外

6 个答案: