我最近在 vk.vom 上看到了一些有趣的 css 技巧
background: url(/images/icons/mono_iconset.gif?8) no-repeat left -237px;
width: 15px;
height: 11px;
这是这个 spritesheet：Spritesheet。
这是如何工作的？
问问题
217 次
3 回答
0
似乎 URL 参数与 spritemap 本身无关。
另一方面，不同的高度由height您提供的 CSS 处理。此外，y 偏移量决定了将使用哪个图标。
于 2014-03-11T11:36:01.310 回答
0
?与这里无关，它left -237px决定了显示哪个图标。
它background-position: x y与高度一起决定了需要显示图像的哪一部分。
更多关于 css sprites http://cssglobe.com/creating-easy-and-useful-css-sprites/
于 2014-03-11T11:40:35.157 回答
0
可能会插入 URL 参数以避免在部署该样式表的新版本时出现缓存问题。如果您使用query string（如？8）附加一些内容，浏览器将被欺骗认为这是一个完全不同的文件，因此它将丢弃缓存的文件并下载新文件。
您正在寻找的“技巧”是 CSS 精灵。基本上，每个图标都加载到单个图像中，并且精灵中的图标用作固定宽度容器（如anchorwithdisplay: block;或 a div）的背景图像。然后，在使用该backgound-position属性时，可以看到精灵的不同部分。
在这篇文章中阅读更多关于 CSS sprites 的内容。
于 2014-03-11T11:40:57.200 回答