隐藏元素的模糊溢出

Question

如果我有一个非常简单的图像：

<img src="image.jpg" class="blur">

.blur {
    filter:blur(20px);
    -o-filter:blur(20px);
    -ms-filter:blur(20px);
    -moz-filter:blur(20px);
    -webkit-filter:blur(20px);
}

模糊时，图像边缘溢出，模糊。

我想要做的是模糊图像，没有溢出。我尝试将其包装在<div>中，并将溢出设置为隐藏：

<div class="image">
    <img src="image.png" class="blur">
</div>

.image {
    width: auto;
    height: auto;
    overflow: hidden;
    display: inline-block;
}

但是，这没有任何效果。有人可以解释一下你是怎么做到的吗？

小提琴：http://jsfiddle.net/629yL/

Answer 1

如果你想像这样放置你的图像，它就不会真正起作用。你需要将它包装在div中并将其作为包装div内部div的背景。然后隐藏父级的溢出 - 这将起作用。

然而，失真仍然存在，您的图像将占用更多的空间。

<强> HTML

<div class="box">
<div class="blur"></div>
</div>

<强> CSS

    .box {
    overflow: hidden;
    margin:5px;
}

.blur {
    -webkit-filter: blur(20px);
    margin: -5px 0 0 -5px;
    background: url("http://readwrite.com/files/dogecoin.jpg");
    height:400px;
    width:400px;
}

<强> Demo

Answer 2

最近，这里接受的答案并不完全正确，因为您没有使用背景图像。它也可以在常规img上使用。

<div style="overflow: initial; display: inline-block;">
    <img src="https://picsum.photos/300" style="filter: blur(20px)">
</div>

<div style="overflow: hidden; display: inline-block;">
    <img src="https://picsum.photos/300" style="filter: blur(20px)">
</div>

...将给您：