Question

当页面有任何移动方式时 - 窗口调整大小，滚动，悬停，用作图标的图像会重新渲染并产生侧边皱纹，在具有透明背景和圆形边框的图像上非常清晰（如示例所示），有没有办法解决这个问题？实施例

<body>
    <style>
        body{
            background: black;
        }
        img{
            max-width: 5vw;
            transition: 1s ease;
        }
        img:hover{
            max-width: 6vw;     
        }
    </style>
    <img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png">


</body>

在这种情况下，当悬停时，图像将出现带有清晰的边框，有些可能会说像素化，并且在几毫秒之后它会回到平滑的边界，这是你的小提琴 - http://jsfiddle.net/o3qk5uaL/

Answer 1

好问题！

这不是问题，它是网络浏览器呈现图片的方式以及过渡的行为 - 您通过将图片绑定到动态窗口大小比重新绘制图片 - 图片大小正在重新计算，浏览器将重新计算在你停下来之前不要完全涂漆。原始图片具有分辨率，并且在更改图片需要以新分辨率呈现并且取决于浏览器且依赖于GPU时，其原始分辨率将看起来最佳。

我找到了一个可以帮助您的小解决方法 - 尝试使用SVG格式来处理那些非常动态的分辨率更改图标。 SVG没有任何分辨率，它是基于XML的矢量图像格式，它们非常适合交互性和动画。

看看这个比较演示：CodePen

代码：因为我们必须......

<img src="http://www.iconsdb.com/icons/preview/white/whatsapp-xxl.png" />
<br /><br />
<img src="http://8tracks.com/assets/brand/8_icon_white.svg" />

与页面交互时图像质量下降第二

1 个答案: