滤镜的投影效果导致图像模糊

Question

我有一张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));}

然而，当我将这个类应用到一张图片上时，图片会变得模糊。你可以在下面的链接中看到这张图片在修改前后的截图。

有没有可能避免这种模糊呢？我尝试了 block-shadow，但这只适用于矩形的图片。

这是应用到图片上的其他 CSS，以防它与问题相关。

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

这里有一个Codepen，可以使它更容易些。 http://codepen.io/patrickaltair/pen/cHsbj

- patrick.altair

---

如果你不想模糊图像，请不要使用<blur-radius>值（第三个3px）。https://developer.mozilla.org/en-US/docs/Web/CSS/filter - Paulie_D

我尝试将<blur-radius>值更改为零并完全去除它，但似乎只影响阴影的弥散程度，不幸的是图像仍然模糊。 - patrick.altair

也许可以用实际图像在Jsfiddle上演示一下？ - Paulie_D

我用你的代码（不同的图像）制作了一个fiddle。但是它似乎没有模糊图像。你是否使用了一个被CSS调整大小的非常大的图像？所有浏览器中的图像都被模糊了吗？顺便说一下，blur-radius值（第三个“3px”）会使阴影变模糊，而不是图像。 - johanpw

@patrick.altair 你用的是什么浏览器？在我这里看起来很好。 - Zach Saucier

我已经在这里用实际图片制作了一个CodePen：http://codepen.io/patrickaltair/pen/cHsbj 照片并不特别大，大小为400x588，约为600kb。Johanpw，在您的小提琴上的第二张图像在我的屏幕上似乎有点模糊。截图来自Chrome，但在Safari中也显得模糊。也许是因为我的屏幕是Retina显示器？ - patrick.altair

Answer 1

这似乎是Retina屏幕上-webkit滤镜的一个bug。

快速修复方法：在你的css文件中添加以下内容：

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

我无法测试它是否有效，因为我没有Retina屏幕，但如果它有效，请告诉我。

- johanpw

---

搞定了！谢谢johanpw！ - patrick.altair

对我来说，Chrome不接受-webkit-前缀，在去掉它之后，图像在变换后仍然模糊，而在生成盒子阴影过渡时只有图像模糊。 - brandito