CSS 缩放背景图片的正确方法

Question

当我放大高质量图像时，CSS scale() 函数与背景图像 div 元素上的过渡和变换相结合变得模糊。

有什么更好的方法可以在 CSS 中放大高质量图像（请仅使用背景属性）并减少模糊？

我用这个CSS:

    .grow { transition: all 4s ease-in-out; }
    .grow:hover { transform: scale(2); }

Answer 1

您可以使用background-size: 100%来覆盖图像的整个容器。然后使用 background-position 平移和缩放到图像的特定部分

CSS Correct ways to zoom an background image