CSS Sprite图片处理技巧

How do CSS Sprites work?

As it turns out, the basic tools to do this are built into CSS, given a bit of creative thinking.

Let’s start with the master image itself. Dividing a rectangle into four items, you’ll observe in this master image that our intended “before" link images are on the top row, with “after" :hover states immediately below. There’s no clear division between the four links at the moment, so imagine that each piece of text is a link for now. (For the sake of simplicity, we’ll continue to refer to link images as “before” images and the :hover state as “after” for the rest of this article. It’s possible to extend this method to :active, :focus, and :visited links states as well, but we won’t go into that here.)

Those familiar with Petr Stanicek’s (Pixy) Fast Rollovers may already see where we’re going with this. This article owes a debt of gratitude to Pixy’s example for the basic function we’ll be relying on. But let’s not get ahead of ourselves.

On to the HTML. Every good CSS trick strives to add a layer of visuals on top of a clean block of code, and this technique is no exception:

  <ul id="skyline">
    <li id="panel1b"><a href="#1"></a></li>
    <li id="panel2b"><a href="#2"></a></li>
    <li id="panel3b"><a href="#3"></a></li>
    <li id="panel4b"><a href="#4"></a></li>
  </ul>

This code will serve as a base for our example. Light-weight, simple markup that degrades well in older and CSS-disabled browsers is all the rage, and it’s a trend that’s good for the industry. It’s a great ideal to shoot for. (We’ll ignore any text inside the links f

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