高对比度主题使用CSS Sprites

  CSS Sprites通过将网页中的图片整合到一张大图中，再利用CSS的“background-image”，“background-position”，“background-repeat”属性来进行背景的定位控制，从而减少页面的http请求，提高页面性能。但如果用户使用了windows系统的高对比主题，用“background”方式实现CSS Sprites就会出现问题。以下是高对比度下的示例截图：

ie（10.0.9200.16442）

chrome（26.0.1410.64 m）

FireFox(24.0)

  从图中可以看出，chrome默认不受高对比度主题影响；在ie和Firefox下，使用高对比度主题后，radio1背景图片不见了！看到这里，如果有对高对比度好奇的小伙伴，可以按左 Alt+左 Shift+PrtScn（或 PrtScn）启用或关闭。高对比度是windows提供的一种辅助功能，通过加大窗口、工具栏按钮和字体并以黑白显示它们，以更改屏幕上显示项的外观。从而提高系统对色盲，色弱或其他视力障碍用户的易用度，是微软“Ease of Access”的一环。从上方的示例截图可以看出，高对比度主题更改的是页面背景（background）和字体颜色（color），这样就能解释为什么高对比度下不显示“精灵”图片了，图标已经被高对比度主题当做是“background”重新覆盖了。

  既然“background”被覆盖，那么显示图片的任务就只能交给“<ima>”标签来完成。通过简单的试验，可以发现“<ima>”在高对比度下能够正常显示，那么接下来要做的就是模拟“background-position”对图片的移动效果，并把图片的多余部分裁减掉，自然而然，会想到css中的"position"和"overflow"。代码如下：

1 <div style="position: relative;overflow: hidden;width: 13px;height: 13px;">
2     <img src="../../image/radiobutton.png" style="position:relative;left:-13px;" />3 </div>

ie，火狐下的显示效果如图：

 

以上就是高对比度下实现CSS Sprites的方案。感谢阅读。