Html 隐藏来自元素的模糊溢出

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

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

.模糊{
过滤器：模糊（20px）；
-o-滤波器：模糊（20px）；
-ms过滤器：模糊（20px）；
-moz滤波器：模糊（20px）；
-webkit过滤器：模糊（20px）；
}

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

我想做的是模糊图像，没有溢出。我已尝试将其包装在

中，并将溢出设置为隐藏：

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

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

.形象{
宽度：自动；
高度：自动；
溢出：隐藏；
显示：内联块；
}

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

---

小提琴：

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

但是，失真仍然会存在，并且图像将占用相当多的空间

HTML

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

---

最近，这里接受的答案并不完全正确，因为您不必使用背景图像。它也适用于常规的

img

…将为您提供：

结帐

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