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

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



我正在尝试做的是使图像模糊，而没有溢出。我尝试将其包装在<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/

最佳答案

如果您要像这样放置图像，它将无法正常工作。您需要将其包装在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

关于html - 隐藏元素的模糊溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24006121/