为什么我的 CSS 转换使 Chrome 中的图像变得模糊？

CSS 过渡效果在 Chrome 中导致图像模糊或移动

问题：

应用涉及以下内容的 CSS 过渡效果时移动分区时，Chrome 会表现出不良行为，例如使分区中的图像模糊或稍微移位。仅当页面有滚动条时，此问题才会存在。

解决方案：

要防止这些影响，请实施以下 CSS更改：

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

解释：

• -webkit-backface-visibility:hidden:禁用分区背面的渲染，这对于简单的翻译来说是不必要的
• -webkit-transform:translateZ(0) scale(1, 1); 将分区的 Z 轴平移设置为零并将其缩放回原始大小，确保图像保持不变。

2020更新：

• 对于模糊图像，请考虑使用其他答案中建议的图像渲染 CSS 属性。
• 为了可访问性和 SEO，请考虑用 img 标签替换背景图像并使用 object-fit CSS 属性。

以上是为什么我的 CSS 转换使 Chrome 中的图像变得模糊？的详细内容。更多信息请关注PHP中文网其他相关文章！