简单的：js判断鼠标在图片上时，产生一个div覆盖在图片上面，这个div给格子背景图
(兼容性好，但是格子尺寸固定，一张网页上多个不同尺寸图片上用，格子全一样大)
复杂的：js生成个html5的canvas画布，把图片放上去，再用js画些线条在上面
(无法顾及不支持html5的浏览器，但是格子尺寸你可以根据图片尺寸比例动态生成)
1、垂直同步：打开后能防止游戏画面高速移动时画面撕裂现象，当然打开后如果你的游戏画面FPS数能达到或超过你显示器的刷新率，这时你的游戏画面FPS数被限制为你显示器的刷新率。你会觉得原来移动时的游戏画面是如此舒服，如果达不到会出现不同程度的跳帧现象，FPS与刷新率差距越大跳帧越严重。关闭后除高速运动的游戏外其他游戏基本看不出画面撕裂现象。总体来讲就是你的配置远远超过那款游戏的需求时才可以打开的高端效果
2、三重缓冲：用于提高打开垂直同步时的性能表现 不会出现太明显的帧率降低 但是会增加显存占用 显存不够的话反而降低性能 另外 这个是基于openGL的 对于主流的基于directX的游戏无效
3、FXAA 英伟达开发的快速近似抗锯齿功能 打开后可以替换掉传统的MSAA抗锯齿 在损失极小的画质表现的前提下明显提高帧率 但是 仅仅只有少数几个新出的大作支持这个功能
这个一般是用CSS来显示特定内容的。譬如有张图片icon.png，里面有很多内容，便可以在CSS中这么用。
.sa {width:20pxheight:20pxoverflow:hiddenbackground:url(icon.png) no-repeat -20px -30px}
注解：
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复，这个不是必须的，不过有会规范一些
-20px -30px是图片的定位，显示时会将图片按这个坐标来定位
上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定，也可以这样定义，让背景自适应：
.sa {width:autoheight:20pxoverflow:hiddenbackground:url(icon.png) no-repeat right bottom}
对于图片2(首页标签)的内容，也是这么使用的：
.a {width:100pxheight:25pxoverflow:hiddenbackground:url(2.png) no-repeat left center}
.a:hover {background-position:right center}
这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。
不过你应该对CSS这方面还不是很了解，目前可能还没有很便捷的方式对这些CSS进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。
