内嵌图像精灵的最佳方式是什么？ [英] What is the best way to do an inline image sprite?

问题描述

经过一番研究后，我发现我可以将透明GIF拉伸到sprite大小，并将背景设置为带偏移量的sprite图像。 =http://jsfiddle.net/iambriansreed/6bT3j/embedded/result =nofollow> http://jsfiddle.net/iambriansreed/6bT3j/embedded/result

 < img src =data：image / gif; base64，R0lGODlhAQABAIAAAP ////// zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw ==
 width =30 height =30style =background：-88px -223px 
 url（'http://ssl.gstatic.com/gb/images/j_f11bbae9.png'）; 
> 
  

这是创建内联图像精灵的最好，最干净的方法吗？

$

解决方案

我相信我上述的方式是加载图片精灵的最佳方式。 p>我只添加了查看该sprite所需的CSS，并将StyleSheet中的所有其他CSS留在了它所属的位置。

虽然图像的真实来源是透明的GIF无论你使用的是实际的gif还是我上面例子中的等价数据，精灵图像都被设置为背景和偏移量来显示所需的精灵。

它可以将img标签用于其目的：例如alt属性和标签的默认内联显示。

具有特定内联css的单个图像标记比我所见过的任何其他html都少，并且可以在需要时添加语义html。

After some reasearch I found that I can stretch a transparent GIF to the sprite size and set the background to the sprite image with offset.

See: http://jsfiddle.net/iambriansreed/6bT3j/embedded/result

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="
    width="30" height="30" style=" background: -88px -223px 
        url('http://ssl.gstatic.com/gb/images/j_f11bbae9.png');"
>

Is this the best, cleanest way to go about creating an inline image sprite?

解决方案

I believe my way as described above is the best way to load an image sprite.

I added only the CSS needed to view that sprite and left all other CSS in the StyleSheet where it belongs.

While the true source of the image is a transparent GIF whether you use an actual gif or the data equivalent in my example above the sprite image is set as the background and offset to reveal the needed sprite.

It makes it possible to use the img tag for it's intended purpose: such as the alt attribute, and the tag's default inline display.

A single image tag with certain inline css is a lot less html than anything else I have seen and semantic html can be added where needed.

这篇关于内嵌图像精灵的最佳方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！