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为负值

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