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

look_w

示例截图为了演示问题，对 Yahoo 网站在 Windows 高对比度模式下的显示进行截图如下。
图 3. Yahoo Video 高对比模式下“下一页”按钮消失图 4. Yahoo 首页，Yahoo logo 不可见，“折叠伸展”按钮不可见类似的情况比较普遍，很多站点大量应用 CSS Sprites 技术来提高页面性能和用户友好性的同时，对于“高对比度模式用户”来说，却造成了可访问性问题。
<img> Sprites谈到 CSS Sprites，大多数 CSSer 都知道，其基本原理就是把网站上用到的一些图片整合到一张单独的图片中，再利用 CSS 的“background-image”，“background-position”属性的组合进行背景定位，分别显示。可是 background-image 元素在高对比模式下却不能被识别，导致图片不可见，传递的信息丢失。
然而 <img> 元素却可以正常使用，我们何不尝试一下和 CSS Sprites 同样的原理，但却用 <img> 标签剪裁显示图片来优化？这就是 Image Sprites 的基本思想，并且这样做还有一个好处是，页面 <img> 元素是可以被打印出来的。