过滤器阴影导致图像模糊答案

【问题标题】：Filter drop-shadow is causing images to blur过滤器阴影导致图像模糊
【发布时间】：2014-09-10 15:43:08
【问题描述】：

我有一个 png 图像，我想在下面有一个微妙的阴影。所以我创建了一个类 .drop-shadow

img.drop-shadow{
    -webkit-filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));}

但是，当我将此类应用到图像时，它会变得模糊。您可以在下面的链接中看到之前和之后的屏幕截图。

是否可以避免这种模糊？我尝试了块阴影，但这仅适用于矩形图像。

这是应用于图像的其他 css 以防万一。

img {
display: block;
max-width: 200px;
width: 100%;
margin: 1rem auto;
margin-bottom: $body-line-height;
padding-top: 0;}

这里有一个代码笔，让它更容易一些 http://codepen.io/patrickaltair/pen/cHsbj

【问题讨论】：

如果您不想模糊，请不要使用 <blur-radius> 值（第三个 3px）。 developer.mozilla.org/en-US/docs/Web/CSS/filter
我尝试将值更改为零并完全摆脱它，但它似乎只是影响投影的消散程度，不幸的是图像仍然模糊。
也许是一个带有实际图像的 Jsfiddle Demo？
我用你的代码创建了一个fiddle（不同的图像）。但它似乎并没有模糊图像。您是否正在使用使用 CSS 调整大小的非常大的图像？图像是否在所有浏览器中都模糊？顺便说一句，模糊半径值（第三个 3px 将模糊添加到阴影，而不是图像。
@patrick.altair 你用的是什么浏览器？我觉得很好

【解决方案1】：

这似乎是 Retina 屏幕上 -webkit 过滤器的错误。

快速修复：将此添加到您的 css 文件中：

img {
    -webkit-transform: translateZ(0);
}

由于我没有视网膜屏幕，因此无法测试它是否有效，但请告诉我是否有效。

【讨论】：