如何在变换比例上修复模糊的背景图像答案

【问题标题】：How to fix blurry background-image on transform scale如何在变换比例上修复模糊的背景图像
【发布时间】：2021-09-13 17:51:16
【问题描述】：

在我的应用程序中，用户可以缩小特定部分。我正在使用 transform: scale() 来实现这一点。

我能够通过使用获得更少的模糊图像

   -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

在我的图像上。

遗憾的是，这不适用于带有背景图像的 div。这些图像仍然很模糊。

有没有办法解决这个问题？（请不要告诉我不要使用比例）

【问题讨论】：

标签： css css-transforms

【解决方案1】：

在发生过渡或重新缩放时，使用变换可能会导致图像模糊，对此有一种解决方法...模糊看起来像 Webkit 在动画变换期间将元素呈现为图像的原因，所以如果放大元素，它看起来模糊直到过渡完成。

一种解决方案可能是首先将元素的大小设置为您将需要的大小，然后使用转换将其缩小以进行初始显示 - 例如如果在悬停时将大小加倍，而不是执行“scale(2,2)”，从“size:200%, scale:(.5,.5)”开始，悬停时切换到“scale(1,1)” ...

这里有一个解决方法：

.normal {
  width: 200px;
  height: 200px;
  margin: 1em auto;
  transition: all 1s linear;
}

.normal:hover {
  transform: scale(2, 2);
}

.prescaled {
  width: 400px;
  height: 400px;
  margin: 1em auto;
  transition: all 1s linear;
  transform: scale(.5, .5);
  // fix positioning due to scale
  position: relative;
  top: -100px;
}

.prescaled:hover {
  transform: scale(1, 1);
}

这主要是关于如何以自己的方式实现它的想法......让我知道它是否有效......

【讨论】：