滤镜阴影会导致图像模糊

时间:2014-09-10 15:43:08

标签: css image dropshadow

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

然而,当我将这个类应用于图像时,它变得模糊。您可以在下面的链接中看到此前后的屏幕截图。

Screenshot of blurry image

是否可以避免这种模糊?我试过了块阴影,但这只适用于矩形图像。

这是应用于图像的另一个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

1 个答案:

答案 0 :(得分:1)

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

快速修复:将其添加到您的css文件中:

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

我无法测试它是否正常工作,因为我没有视网膜屏幕,但如果有,请告诉我。