html – 具有负背景位置的css精灵不清楚
发布时间:2020-12-14 23:39:42 所属栏目:资源 来源:网络整理
导读:我正在使用一些现有代码,他们正在使用css sprites.有大图像,用于显示所有图像. 它基本上是一个Ul和li元素.每个li元素使用此图像并使用背景位置. 我完全理解css sprites,它的性能更好.但唯一不明确的是为什么x和y位置以负边距开始.精灵中的大多数图像都是通过
我正在使用一些现有代码,他们正在使用css sprites.有大图像,用于显示所有图像.
它基本上是一个Ul和li元素.每个li元素使用此图像并使用背景位置. 我完全理解css sprites,它的性能更好.但唯一不明确的是为什么x和y位置以负边距开始.精灵中的大多数图像都是通过使用类似的东西来重新获得的 -540px -30px like this 我正在浏览器上观看该图像并且它显示正确,并且它们应该正确0,0. 我在这里错过了一些东西 解决方法
只需将元素视为窥视孔,将精灵图像移动到其后面即可.
0,0是窥视孔的左上角. 根据您想要看到的巨大精灵图像的哪个部分,您需要为其提供负偏移. -50,-20 |-----------------------------------------------| | | | 0,0 | | |-----| | | | | <--- Peep-hole | | |-----| | | | | | |-----------------------------------------------| (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |