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" onmouseover="this.className='right'" onmouseout="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.size a:hover { background:transparent url("menu.png"); } img.left { position:absolute; clip:rect(0 104 32 0); left:0px; } img.right { position:absolute; clip:rect(0 208 32 104); right:0px; }

这里要指出的是，图片是先置于容器中，再进行切割，若，left和right的对齐方式互换，那么该显示的图片则正好在div的外面，因而无法被看到，可以理解为先固定再切割，将切割代码clip和对齐方式代码位置互换比较容易理解

关于背景的切割显示，也可以使用background设置attachment为scroll方式切割:

background:transparent url('a.png') no-repeat scroll 0px 0px;

用这个方法要注意最后两个background-position的取值，图片左上角为（0,0），所以取右边的图需要将图片向左scroll，所以X为负值

，切割图片的用处非常广泛，因为这可以大大减少图片的存储空间，还有很多方法可以切割你，但基本原理类似，核心思想就是：取图片的哪里以怎样的方式放到哪个容器中