1.第一种就是最原始的方法,图片使用CSS的background-image载入,再使用background-position去调整位置。
缺点就是列印时,如果没有去修改设定值,就不会印出背景的色彩/图片,还有一些浏览器没支援background-position ,显示会有问题。
2.第二种叫Extended CSS Sprites或Extending CSS Spriting,是使用img标签,设定为绝对坐标后,再用一个相对坐标的div包起来,使用clip切出想要显示的图片位置后,再透过微调位置来摆放好。
这种方法就没有第一种的列印、浏览器问题,但是算座标有点麻烦,而且有位置调整,定位上可能会有些问题。
3.算是第二种的 回心转意符变形,div设定要显示的宽高,overflow设为hidden,里面包的img再调整left与top来设定从哪里为基准点。
缺点就是列印时,如果没有去修改设定值,就不会印出背景的色彩/图片,还有一些浏览器没支援background-position ,显示会有问题。
2.第二种叫Extended CSS Sprites或Extending CSS Spriting,是使用img标签,设定为绝对坐标后,再用一个相对坐标的div包起来,使用clip切出想要显示的图片位置后,再透过微调位置来摆放好。
这种方法就没有第一种的列印、浏览器问题,但是算座标有点麻烦,而且有位置调整,定位上可能会有些问题。
3.算是第二种的 回心转意符变形,div设定要显示的宽高,overflow设为hidden,里面包的img再调整left与top来设定从哪里为基准点。