HTML+CSS实现合并图片的切割显示以及背景渲染

今天用了大约3小时才搞定了这么一小点工作。。

合并图片的切割显示是我早就想研究一下的，因为这个东西应用非常广泛，今天总算在HTML的框架里有了些了解。

核心代码为：

<div class="size"><a href="home.png" mce_href="home.png"><img src="home.png" mce_src="home.png" border="0" alt="error" οnmοuseοver="this.className='right'" οnmοuseοut="this.className='left'" /></a></div> div标签是个很好的东西，用来逻辑区分页面结构，在size选择器中，设定了div的大小，并设置多余部分隐藏显示，且大小为合并图片的一半

img由a包围，由a控制背景，图片的变换交给img，否则会产生图片覆盖的问题！这个问题困扰了我好久好久。。

核心CSS代码：

div.size { width:104px; height:32px; overflow:hidden; } div.size a { width:104px; height:32px; } div.s