css sprites

A few days back, I wanted to use a Twitter icon from one of my other websites but I was not able to save it from the web page. Then I looked into the page source and found that it’s using CSS Sprites to display all the social bookmarking images from a single large image. So my WordPress theme is using CSS Sprites for faster page loading and I was totally unaware of that. Then I decided to learn it and how to use it in a webpage.

几天前，我想使用我其他网站之一的Twitter图标，但无法将其从网页上保存。 然后，我查看了页面源，发现它正在使用CSS Sprites显示单个大图像中的所有社交书签图像。 所以我的WordPress主题是使用CSS Sprites来加快页面加载速度，而我对此一无所知。 然后，我决定学习它以及如何在网页中使用它。

I was amazed to find out that there are so many online tools to create a CSS Sprite image and provides CSS Code to use them. Some of them even went a further step to provide a sample HTML page to make the learning more comfortable.

我惊奇地发现有这么多在线工具可以创建CSS Sprite图像并提供CSS代码来使用它们。 他们中的一些人甚至进一步提供了示例HTML页面，以使学习更加舒适。

Here I am providing 6 online CSS Sprite Generator tools and all of them have something unique to be in the list.

在这里，我提供了6个在线CSS Sprite Generator工具，所有这些工具都有其独特之处。

1. CSS Sprite Generator： (1. CSS Sprite Generator:)

This is one of the best online tool for CSS Sprite images and getting their CSS Code and HTML code. The best part is that you can create your account here and then login after sometime to get your older project data. You can add up more images in the project and again generate the code. A very useful tool for designers who create themes and use CSS Sprite techniques a lot.

这是用于CSS Sprite图像并获取其CSS代码和HTML代码的最佳在​​线工具之一。 最好的部分是您可以在此处创建帐户，然后在一段时间后登录以获取较早的项目数据。 您可以在项目中添加更多图像，然后再次生成代码。 对于创建主题并大量使用CSS Sprite技术的设计师来说，这是一个非常有用的工具。

2. ： (2. :)

This is one of the most widely used tool having a lot of options. They provide option to create the image in either and vertical format, ignore duplicate images, image size options. The two things I really liked a lot about this tool are:

这是最广泛使用的工具之一，具有很多选项。 它们提供了以垂直格式创建图像的选项，忽略重复图像，图像尺寸选项。 我非常喜欢此工具的两件事是：

• Support for various languages
  支持多种语言
• Upload files in zip format, very handy if you have 50+ files to use.
  以zip格式上传文件，如果要使用50多个文件，则非常方便。

3. CSS Sprit： (3. CSS Sprit:)

If you want to have rollover effect with your CSS Sprite image, this is the tool to use. The only demerit with the tool is that the each file size should be less than 5kb. They provide CSS and HTML code to use and you can even load images from the URL in Custom Sprites mode.

如果您希望CSS CSS Sprite图像具有翻转效果，则可以使用此工具。 该工具的唯一缺点是每个文件的大小应小于5kb。 它们提供了CSS和HTML代码供您使用，您甚至可以在“自定义画面”模式下从URL加载图像。

4. ： (4. :)

Reverse tool to generate CSS code to display selected image from a single image. The visual WYSIWYG editor and JQuery based interface is easy and awesome to use. A great tool to use if you just want some part of the image to display using CSS Sprites.

反向工具，用于生成CSS代码以显示单个图像中的选定图像。 可视的WYSIWYG编辑器和基于JQuery的界面易于使用。 如果只希望使用CSS Sprites显示图像的某些部分，则可以使用该工具。

5. ： (5. :)

A simple online tool to create CSS Sprite image and getting its CSS code. Good for basic usage, Ajax based and simple interface.

一个简单的在线工具，用于创建CSS Sprite图像并获取其CSS代码。 适合基本用法，基于Ajax的简单界面。

6. ： (6. :)

If none of the above tool is working, then you can go for it. A simple tool providing basic CSS rules, CSS Sprite image and sample HTML page to use it. If you have many images to use, avoid this tool.

如果上述工具均无法正常工作，则可以继续使用。 一个简单的工具，提供基本CSS规则，CSS Sprite图片和示例HTML页面以供使用。 如果要使用许多图像，请避免使用此工具。

I hope you liked the post, don’t forget to share it with others.

希望您喜欢这篇文章，不要忘记与他人分享。

翻译自:

css sprites