CSS图像精灵 [英] CSS image sprites

问题描述

使用css image sprites的唯一好处是http请求少了？

还有其他好处吗？

$ b

解决方案

像你说的一样，其中一个主要优点是减少对服务器的请求数，提高响应时间（特别是如果你加载了大量的小图片）。但这不是人们使用sprite的唯一原因。

如果你不使用sprites作为鼠标悬停显示，用户将看到图像消失第二...它看起来真的很糟糕。这是因为如果您更改图片而不是只移动精灵，它会加载一个新的图片，加载时间对最终用户可见。

  .bad {
 background：url（abc.jpg）; 
} 
 .bad：hover {
背景：url（abcHover.jpg）; 
} 
 
 .good {
 background：url（abc.jpg）0px 0px; 
} 
 .good：hover {
 background-position：15px 0px; 
} 
  

sprite的另一个优点是可以将所有图像保存在一个位置，在某些情况下，它更有意义（对于菜单等）。

要确定要显示的精灵的哪个区域，只需使用photoshop或任何其他图像编辑软件。

Is the only benefit of using css image sprites that there is less http requests?

Or is there other benefits?

Also is there an easy way of detiming which area of a sprite to show?

解决方案

Like you said, one of the main advantage is to reduce the number of requests to the server, improving the response time (especially if you're loading a large amount of small images). But this is not the only reasons people use sprites.

If you don't use sprites for a "mouse over" display, the user will see the image disappear for a second... and it looks really bad. This is because if you change the image instead of just moving the sprite around it will load a new image and the loading time can be visible to the end user.

.bad{
  background:url(abc.jpg);
}
.bad:hover{
  background:url(abcHover.jpg);
}

.good{
  background:url(abc.jpg) 0px 0px;
}
.good:hover{
  background-position:15px 0px;
}

Another advantage of sprites is that you can keep all your images in one location and in some cases it makes more sense (for menus and so on).

To determine which area of a sprite to show, just use photoshop or any other image editing software.

这篇关于CSS图像精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！