圖像在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高度轉換模糊

回答

相關問題