首頁 > web前端 > css教學 > 為什麼我的 CSS 轉換使 Chrome 中的圖片變得模糊?

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

Patricia Arquette
發布: 2024-12-23 06:09:31
原創
516 人瀏覽過

Why Are My CSS Transitions Making Images Blurry in 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板