html - 隐藏元素的模糊溢出

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

但是，这没有任何效果。有人可以解释一下您是如何做到这一点的吗？

fiddle :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