如何修复变换比例上的模糊图像

Posted 2023-03-06

【中文标题】如何修复变换比例上的模糊图像

【英文标题】：How to fix blurry Image on transform scale

【发布时间】：2016-08-15 17:06:46

【问题描述】：

当我将 transform: scale(1.1); 悬停在某个元素上时，图像变得模糊。如何修复此错误？

例子

【问题讨论】：

-webkit-transform: scale / blurry images的可能重复

【参考方案1】：

试试这个，对我来说很好用！

img 
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);

【讨论】：

虽然 Chrome 77 会自动重新锐化缩放后的图像，但 Safari 13.0.1 不会，并且提供的解决方案也不会使 Safari 重新锐化图像。我使用的图像是 SVG 矢量。我猜这只是 Safari 的事情。

据我所知，如果您放大外部容器（大于 1）并缩小图像（小于 1），它会起作用。示例：jsfiddle.net/5mf7naxh/4

【参考方案2】：

TL;DR transform: scale 实际上是在缩放原始图像，并且因为您将其留给浏览器的渲染引擎来确定应该去那里的内容，所以您得到了一个模糊的图像。试试

img 
transform: scale(.9)    


img:hover 
transform: scale(1)

亚伦·西布勒answered the question for me.

我刚刚经历了这个谜语。在您的示例中，您将 需要将 img DOWN 转换为“transform: scale(0.7)”和 然后在悬停时放大到图像的原生尺寸，例如 “变换：比例（1.0）”

比例值是相对于原始图像的尺寸 - 不是 它们在屏幕上的当前尺寸，因此 1 的比例始终等于 原始图像的尺寸。

我在这里用过这个；

http://meetaaronsilber.com/experiments/css3imgpop/index.html

【讨论】：

这对我不起作用，因为它使图像比最初需要的要小

【参考方案3】：

我遇到了 SVG 缩放和图像模糊的问题。我将背景图像放大到 4.5，放大时图像变得非常模糊。 我读到你可以先缩小transform: scale(0.7)，然后扩大到transform: scale(1.0)。就我而言，这意味着对我的动画进行大规模重建。我有一个非常复杂的动画，有多种比例和变换等。

我只是保持原样并添加了一个伪比例宽度。然后浏览器似乎重新渲染每一帧，但由于宽度实际上并没有改变，你仍然可以使用 transform: scale(x.x) 进行缩放，您将获得非常清晰的图像。

也许有人可以证实这一点。这是我的代码。在我的例子中，图像是 86px 宽，它放大到初始值的 4.5 倍。

<div class="overall-scale">
 <div class="image-scale"></div>
</div>

@keyframes overall-scale 
0% 
    transform: scale(1);


100% 
    transform: scale(4.5);



@keyframes image-scale 
0% 
    width: 86px;


100% 
    width: 86px;

希望这会有所帮助，我的解释是有道理的。

如果这对您不起作用，请发表评论。

【讨论】：

提到的其他方法对我不起作用。也许有人有同样的问题。 :)

【参考方案4】：

我已经阅读了所有的 cmets，并尝试了人们建议的所有解决方案。但除了旋转（360 度）之外，没有什么是真正好的。一切，除了这个使图像结结巴巴，或者它们最初变得太模糊。但是如果你不隐藏它，旋转看起来很奇怪。所以我决定旋转 0.0000001deg 并且成功了！图像仅在过渡期间是模糊的，但在结束和开始时它是清晰的。可能是我的图片太小了。

所以，我目前的解决方案是将此部分添加到 CSS（仅此而已）：

    img 
      transform: rotate(0.00000000001deg);