Question

我正在尝试变焦和模糊＆＃34; css效果。因此，当我将鼠标悬停在图像上时，它应该模糊并缩放一点，同时包含在overflow:hidden的div中。

但是，在Chrome中运行时，总会出现奇怪的故障。转换过程中，容器周围会出现模糊的白色边框。

我想知道是否有更好的方法吗？还是一种规避它的方法？非常感谢！

你可以看到一个演示问题的gif：http://imgur.com/SrK5rXq

与firefox中运行的代码相同：http://imgur.com/942LBKV

注意图像中的边框。

以下是我的代码：

<style>
#img0{
    width:500px;
    height:auto;
}
.hoverBlur{
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}
.hoverBlur:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    transform:scale(1.1);

    -webkit-filter:blur(15px);
    -moz-filter:blur(15px);
    filter:blur(15px);

}
.container{
    margin:200px;
    width:500px;
    height:333px;
    border:1px solid #ccc;
    overflow:hidden;
}
</style>
<div class="container">
    <img id="img0" src="test.jpg" class="hoverBlur"/>
</div>

Answer 1

这是一个 REALLY 的旧线程，但我遇到了这个问题，找不到在其他任何地方发布的解决方案，因此我将其发布在这里：

您可以通过以下方法解决此问题：在图像上添加与模糊大小相同的边距（在本例中为15px），然后进行变换：将图像转换回原位。

https://jsfiddle.net/zeojxtvb/

因此，在我们的示例中，对图像应用了blur（15px）。因此，请对图片应用以下内容：

<!-- DEFAULT: <policy domain="resource" name="memory" value="256MiB"/> -->
<policy domain="resource" name="memory" value="1024MiB"/>

在缩放和模糊铬图像时出现奇怪的故障

1 个答案: