css - PNG 图像在针对 Retina 缩放 50% 时看起来很奇怪

标签 css png sprite-sheet

我有一个透明的 sprite PNG 图像 - 对于 Retina 屏幕,尺寸为 50%。
奇怪的是,我在常规显示器上显示的 PNG 图片上有那些小的白线瑕疵,这在 Chrome 中尤其明显。

这是一个截图(有点小,但希望你能看到):

original screenshot

放大到400%

enter image description here

最佳答案

Retina 屏幕在尺寸上并没有什么不同,它们的区别在于像素密度。因此,将图像缩小 50% 不会奏效。您需要改为分配 background-size: 50% 50%

这将使您的浏览器渲染图像但缩小 50%。由于它们的大小实际上大于显示的大小,因此剩余的像素将根据屏幕的像素密度合并。


如果您仍然这样做并且问题仍然存在,则问题出在图像本身的质量。

关于css - PNG 图像在针对 Retina 缩放 50% 时看起来很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24531363/

相关文章:

html - CSS 选择器根据结果检查子 div 的属性和样式?

javascript - 响应式六边形菜单

javascript - 绝对定位的嵌套 div 会导致溢出问题

java - 在不丢失透明度的情况下在 Java 中调整图像大小

javascript - 如何使用 javascript 从 Sprite 表缩放/拉伸(stretch)/倾斜 Sprite ?

javascript - 关闭(忽略)html 文本/搜索元素中的占位符属性

javascript - 将 Textpath svg 发布到 png

python - PyPNG 绘制一个简单的填充框

CSS Sprite - 我可以用某种方式在 CSS 中做简单的数学运算吗?

Android:如何根据目的地坐标旋转移动的动画 Sprite