為什麼我的 CSS 轉換使 Chrome 中的圖片變得模糊？

CSS 過渡效果在Chrome 中導致影像模糊或移動

問題：

應用涉及以下內容的CSS 過渡效果時移動分割區時，Chrome 會表現出不良行為，例如使分割區中的影像模糊或稍微移位。只有當頁面有捲軸時，此問題才會存在。

解決方案：

要防止這些影響，請實施以下CSS變更：

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

解釋：

• -webkit-backface-visibility:hidde n:停用分區背面的渲染，這對於簡單的翻譯來說是不必要的
• -webkit-transform:translateZ(0) scale(1, 1); 將分割區的 Z 軸平移設為零並將其縮放回原始大小，確保影像保持不變。

2020更新：

• 對於模糊圖像，請考慮使用其他答案中建議的圖像渲染 CSS 屬性。
• 為了可訪問性和 SEO，請考慮用 img 標籤取代背景圖片並使用 object-fit CSS 屬性。

以上是為什麼我的 CSS 轉換使 Chrome 中的圖片變得模糊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！