图像在CSS3高度转换模糊

我正在开发一个网站，演示可能会看到here。我面临的问题是，当滚动标志的高度降低时，大部分时间都会略微模糊。当我再次向上滚动时，同样的事情发生，并且徽标恢复到原始大小。这发生在Chrome和IE（边缘），但在Firefox中正常工作。图像在CSS3高度转换模糊

我想这是因为应用了CSS3转换而发生的。如果我删除过渡，它可以很好地扩展。

transition: all 0.3s ease-in-out; 
    transition-property: all; 
    transition-duration: 0.3s; 
    transition-timing-function: ease-in-out; 
    transition-delay: initial;

转换应用于的属性为height。

最初：height: 3.125rem; 在滚动：height: 2.375rem;

我尝试添加下面给出here，但没有奏效。事实上，添加以下内容会使我的图像在加载时稍微模糊，即使没有任何滚动。

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0) scale(1.0, 1.0);

而且也：

-webkit-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);

来源

2016-08-25 Fahad

您是否知道您的标志超过两千*像素宽？ –

调整栅格图像的大小不可避免地会导致一些模糊。考虑使用矢量图形（SVG）。 –

为了澄清，我指出的原因是浏览器只能为你调整图像大小。这不是有四种缩小比例缩小方法的Photoshop。如果重新上传缩放后的版本更接近最终的150像素〜200像素大小，则光栅化图像可能会更好看。让photoshop或其他图像编辑器找出缩放而不是客户端浏览器。 Marat指出，向量也可能是一个好主意。 –

浏览器只能做这么多的调整图像大小为您服务。这不是Photoshop的缩小比例的四种不同的方法。如果重新上传缩放后的版本，该版本接近最终的150像素〜200像素大小（可能位于范围的200像素侧），那么您的光栅化图像可能会更好看。让photoshop或其他图像编辑器找出缩放而不是客户端浏览器。 Marat指出，向量也可能是一个好主意。

来源

2016-08-25 20:47:29

图像在CSS3高度转换模糊

回答

相关问题