Jef*_*ake 10 css image css-sprites
使用CSS精灵进行图像处理时的典型经验法则是,您应该只对较小的图像(如图标)执行此操作,并且实际图像内容应始终通过<img>元素表示.我的问题是:为什么？对于内容图像,spriting的优势是否也值得？
我读过的一个原因是能够使用alt文本,在语法上更正确并且可以被屏幕阅读器访问.然而,当这是一个问题时,难道你不能轻易地使用一个小的透明图像与精灵上面的所有语法糖,呈现真正的视觉内容？
你可以,但是:
内容图像不像图标那样像UI类型的图像那样被重复使用.想象一下一个报纸网站:如果他们在每个故事中使用的每个内容图像都是精灵的一部分,那么精灵很快就会变得庞大,即使是只看过一个故事的用户也会下载.
网站内容通常由不懂CSS的人维护.期望内容编辑器编辑主精灵图像文件,重新保存到JPG,并弹出一些CSS只是为了在页面上放置图像,这有点不合理.
如果你精灵很多大图像文件,精灵文件会变得非常大.当用户第一次访问该页面时,下载可能需要花费不可思议的长时间,或者对于仅最终看到该精灵中的一个图像的用户而言可能会消耗太多带宽.
显然,这些都是概括 - 在特定情况下,对更大/更多内容的图像进行精灵化可能是完全合理的.
在<img>为精灵使用带有微小透明图像文件的标签时,您可以对任何精灵图像执行此操作 - 它通常用于剪切和定位精灵图像超出background-position允许范围.