Question

最近我用CSS sprites处理了。它工作正常。

我创建了一个精灵，.css文件和html结构。它看起来像

.sprites{
         background-image:url('../img/sprite.png');
         background-color:transparent;
         background-repeat:no-repeat;
         height:44px;
         width:44px;
  }
.pic1            {background-position:0 0;}
.pic2            {background-position:-44px 0;}



 <div class="outer"><div class="sprites ${image}"></div></div>

如果条件为真，

${image}会选择该类。

我手动创建sprite，css和html。我本可以使用一个生成器，但代码也是一样的。

有没有办法自动创建sprite和css，例如java吗？如果有一个包含50个图像的文件夹，那么必须编写的程序 - 我猜 - 应该创建一个精灵和相关的css属性本身。这可能吗？你听说过这样的节目吗？

Answer 1

It is possible

Answer 2

如果您使用的是.net，请查看http://www.RequestReduce.com。它不仅自动创建精灵文件，而且还可以通过HttpModule动态执行，同时合并和缩小所有CSS。它还使用量化和无损压缩优化精灵图像，并使用ETags和Expires标头处理生成文件的服务，以确保最佳的浏览器缓存。设置很简单，只需要一个简单的web.config更改。请参阅我的blog post有关Microsoft Visual Studio和MSDN示例库采用它的信息。

由于RequestReduce通过HTTP提取CSS和图像，因此您无需在任何特定文件夹或格式中排列图像。所以你的css和sprite甚至可以在其他地方托管，它会起作用。

Answer 3

此工具可能有助于稍后引用此功能的人。 http://www.spritecss.com/

CSS Sprites Automation

3 个答案: