如何创建约200幅图像的精灵？

我有一个网站，我需要加载大约150张150 * 150大小的图片。如何创建约200幅图像的精灵？

我无法在一个中创建20-30张图像的不同精灵。由于图像路径来自数据库。它使用jQuery如下所示。

<ul id="albumsIcons"> 
</ul> 

$('#btnGetAlbums').on('click',function(e) 
{ 
    $.ajax(
    { 
     url : "Controller/Action", 
     type : "GET", 
     success : function(data) 
     { 
      $.each(data,function(album) 
      { 
       $('#albumIcons').append('<li id='+album.Id+'> 
              <img src='+album.imgPath+'/>album.Name </li> 
      } 
     } 
    } 
}

我必须在一次调用中加载最少100张专辑。

所以我想创建精灵，我已经检查了几乎5-6个链接，但是他们最多只需要一个精灵的20个图像。

的任何链接，可以创建符合我的要求。或者我的要求的任何替代解决方案。

来源

2016-01-26 Kgn-web

你可以使用任何软件创建一个正常的PNG图像，但是你只需要发现背景位置的每个图像的坐标。 – miguelmpn

但是使用巨大的精灵是一种妥协，你可以在这里阅读.. https ：//www.smashingmagazine.com/2010/03/css-sprites-useful-technique-or-potential-nuisance/ – miguelmpn

@miguelmpn但是如果要识别200张图片的x，y坐标将会非常繁琐，但如果你有任何链接来创建这样的PNG，请发布，我会检查＆看到 –

我会这样做与SmartSprites：它的默认目的是将CSS文件与单个精灵（意味着：每个精灵一个单一的图像文件）转换为CSS文件只有一个图像文件（或实际上你喜欢多少）为多个精灵。

SmartSprites会变成这样的事情...：

/** sprite: mySprite; sprite-image: url('/mySprite.png'); sprite-layout: horizontal */ 

#albumIcons li 
{ 
    width:150px; 
    height:150px 
} 
#img1 
{ 
    background-image:url(/images/1.png); /** sprite-ref: mySprite; */ 
} 
#img2 
{ 
    background-image:url(/images/2.png); /** sprite-ref: mySprite; */ 
}

...这个：

#albumIcons li 
{ 
    width:150px; 
    height:150px 
} 
#img1 
{ 
    background-image: url('/mySprite.png'); 
    background-position: -0px top; 
} 
#img2 
{ 
    background-image: url('/mySprite.png'); 
    background-position: -150px top; 
}

但最主要的结果是新的映像文件被发现（并重新使用）在/mySprite.png。

第一行（智能sprite定义）的多次提及是可能的，因此您可以生成多个输出文件。

来源

2016-02-24 21:56:05 Eddie

如何创建约200幅图像的精灵？

回答

相关问题