标题:
Image Sprites 对“高对比度”模式下背景图片显示优化 （4）
[打印本页]
作者:
look_w
时间:
2018-9-23 12:09
标题:
Image Sprites 对“高对比度”模式下背景图片显示优化 （4）
测试页面快捷键 左 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 时，超出宽高的文字部分会被剪裁掉。
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)
Powered by Discuz! 7.0.0
用 img Sprites 在高对比模式下图片正常显示，对于 text only browser 来说，也有相对应的文本显示图片内容信息。同时，当需要打印页面时，background-image 是默认不会被打印出来时，而 img Sprites 也顺便解决了这个问题。