html – 具有负背景位置的css精灵不清楚

概述我正在使用一些现有代码,他们正在使用css sprites.有大图像,用于显示所有图像. 它基本上是一个Ul和li元素.每个li元素使用此图像并使用背景位置. 我完全理解css sprites,它的性能更好.但唯一不明确的是为什么x和y位置以负边距开始.精灵中的大多数图像都是通过使用类似的东西来重新获得的 -540px -30px like this 我正在浏览器上观看该图像并且它显示正确,并且它 我正在使用一些现有代码,他们正在使用CSS @R_404_5097@.有大图像,用于显示所有图像.

它基本上是一个ul和li元素.每个li元素使用此图像并使用背景位置.

我完全理解CSS @R_404_5097@,它的性能更好.但唯一不明确的是为什么x和y位置以负边距开始.精灵中的大多数图像都是通过使用类似的东西来重新获得的

-540px -30px like this

我正在浏览器上观看该图像并且它显示正确,并且它们应该正确0,0.

我在这里错过了一些东西

解决方法 只需将元素视为窥视孔,将精灵图像移动到其后面即可.

0,0是窥视孔的左上角.

根据您想要看到的巨大精灵图像的哪个部分,您需要为其提供负偏移.

-50,-20|-----------------------------------------------||                                               ||       0,0                                     ||       |-----|                                 ||       |     |  <--- Peep-hole                 ||       |-----|                                 ||                                               ||                                               ||-----------------------------------------------|

总结

以上是内存溢出为你收集整理的html – 具有负背景位置的css精灵不清楚全部内容，希望文章能够帮你解决html – 具有负背景位置的css精灵不清楚所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。