我有一个 Logo 图像,当用户向下滚动时,它的宽度会减小,而当他们向上滚动时,它会恢复宽度。问题是它在像这样转换后失去了抗锯齿:
(请原谅它下面的几行,那只是导航栏的其余部分)
这似乎只发生在 Chrome 中。
Logo 的 CSS
.logo {
padding: 10px;
margin-left: 100px;
width: 350px;
-webkit-transition: width 0.3s;
transition: width 0.3s;
}
在向下滚动时由 Javascript 添加并在向上滚动时删除的小 Logo 类的 css
.header-top-mini .logo {
width: 200px;
}
我已经尝试了这里的其他一些有类似问题的线程,但似乎没有任何效果。感谢您的帮助。
最佳答案
也许你可以尝试使用 transform: scale(Xdeg);或将图像文件类型更改为 svg?好吧,不确定这是否能解决问题
编辑*
只是一些关于 svg 缩放的附加信息 https://css-tricks.com/scale-svg/
关于javascript - PNG 图像在 css 宽度转换后失去抗锯齿,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43878892/