CSS Sprite图片处理技巧

  #panel1b {left: 0; width: 95px;}
  #panel2b {left: 96px; width: 75px;}
  #panel3b {left: 172px; width: 110px;}
  #panel4b {left: 283px; width: 117px;}

So #panel1 isn’t horizontally positioned at all, #panel2b is positioned 96px to the left of #skyline’s left edge, and so on. We assigned the links a display: block; value and the same height as the <li>s in the past listing, so they’ll end up filling their containing <li>s, which is exactly what we want.

At this point we have a basic image map with links, but no :hover states. See the example. It’s probably easier to see what’s happening with borders turned on.

Hovers

In the past we would have applied some JavaScript to swap in a new image for the after state. Instead our after states are in one image, so all we need is a way to selectively pull each state out for the appropriate link.

If we apply the master image to the :hover state without additional values, we make only the top left corner visible — not what we want, though clipped by the link area, which is what we want. We need to move the position of the image somehow.

We’re dealing with known pixel values; a little bit of math should enable us to offset that background image enough both vertically and horizontally so that only the piece containing the after state shows.

That’s exactly what we’ll do:

  #panel1b a:hover {
    background: transparent url(test-3.jpg)
    0 -200px no-repeat;}
  #panel2b a:hover {
    background: transparent url(test-3.jpg)
    -96px -200px no-repeat;}
  #panel3b a:hover {
    background: transparent url(test-3.jpg)
    -172px -200px no-repeat;}
  #panel4b a:hover {
    background: transparent url(test-3.jpg)
    -283px -200px no-repeat;}

Where did we get those pixel values? Let’s break it down: the first value is of course the horizon

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!