Image Sprites 对“高对比度”模式下背景图片显示优化 （4）

look_w

测试页面快捷键 左 Alt + 左 Shift + Printscreen 启动高对比模式。对比一下 CSS Sprites demo 和 Img Sprites demo 页面之间的差别。

• CSS Sprites Demo
• Img Sprites Demo

图 6. 高亮模式下的截图对比用 img Sprites 在高对比模式下图片正常显示，对于 text only browser 来说，也有相对应的文本显示图片内容信息。同时，当需要打印页面时，background-image 是默认不会被打印出来时，而 img Sprites 也顺便解决了这个问题。
Img Sprites 的局限性

• 它必需包含在一个块级元素 (block element) 或是内联元素 (inline element) 中。
• 在 <fieldset>、<legend>、<input>、<button>、<table>、<tr>、<td>、<th> 中失效。
• :hover 鼠标翻转图片效果不得不利用 JS 处理。而 CSS Sprites 可以轻易处理 hover 效果。
• 当图片禁止显示时 (text-only-browser)，对文字进行放大或 re-size 时，超出宽高的文字部分会被剪裁掉。