css - 如何动态调整多 css Sprite 图像的大小

Question

我有一个由多个 css sprites 构建的图像，如以下问题所述:css image building with sprites

我将如何使用它以便我可以在顶部容器上应用一个尺寸来动态调整所有子级的尺寸？

这是目前的工作流程:http://jsfiddle.net/hWhUb/3/

这是当前的 html 结构:

<div class="icon">
    <div class="brigade brigade-purple-left">&nbsp;</div>
    <div class="brigade brigade-purple-middle">&nbsp;</div>
    <div class="brigade brigade-purple-right">&nbsp;</div>
    <div class="icon-type icon-hero">&nbsp;</div>
</div>​

Answer 1

我有几个问题，可能会导致解决方案:

1. 为什么要使用多张图片来实现一些可以使用一些 css3 和一张图片轻松实现的内容(交叉图片)？可以更轻松地调整单个图像的大小，调整为容器宽度的百分比，甚至可以使用 css3 background-size 属性。

2. 如果您必须为每件事都使用图像，您是否可以考虑永远不使用 sprite？它的可维护性是纯粹的烦恼，尤其是当有人以后不得不把这个元素从你身边拿走的时候。

3. 也许是两者的结合？

如果您选择第二个选项，我建议使用数据 uris。这是一个简短的解释: http://css-tricks.com/data-uris/它比 sprites 多节省一个 http 请求，更易于维护，并且在我看来，整体大小的差异相当微不足道，并且支持很棒 - IE8+ 和我们所有的理智浏览器。设置非常简单，特别是如果您使用全能的 sass 解释器，但是有一些漂亮的实用程序(命令行、GUI 甚至基于 Web)可以将您的图像转换为 base64。稍加努力，它甚至可以支持 IE7!

编辑 3.11.12

您还可以添加 http://css3pie.com/到要检查的选项 - 它可以让您使用 Internet Explorer 进行我们如此喜爱和喜爱的 css3 技巧。这对我来说有点不可预测，但对于像这样的小壮举，它绝对可以做到。

此外，我在下面评论了您的浏览器支持需求。 IE7 不会阻止你；)