Question

网页在不同设备访问时显示不同的图片

最近看到一个网站，在电脑访问的时候它的Logo显示图片A，用手机等移动设备访问时，它的Logo则显示图片B。 后来发现在网页的CSS里有个background: url("http://www.123.com/media/abc") ; 输入这个地址访问，出现一张完整的GIF图片，但是这张GIF图片里却同时有图片A和图片B。试着用相同代码，修改了GIF图片，结果却什么都显示不了。

请问，以上网页在不同设备访问时显示不同的图片的效果是怎么做到的，具体是CSS里的什么内容？或者自己来做的话，怎样实现？最终目的就是能修改LOGO对应的图片。

Answer 1

如果你使用CSS2的话，你只能通过JS检测浏览器类型，然后修改LOGO显示。一般都是把图片做到一个图上，通过定位显示不同的位置，这个可以参考“css图片精灵”，用法自行百度。如果你使用HTML5+CSS3就比较省事了。可以针对不同浏览器写不同的css样式，它自己能够识别不同的浏览器类型然后切换样式。