image-set实现Retina屏幕下图片显示

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

最近一直在学习Retina屏幕下图片的处理方法,从《走向视网膜(Retina)的Web时代》一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说,这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片,以及Coding实现,可以说是一条龙了。这些都是自以为事,为什么呢?除了这些方法,其实还有更先进的方法,这也就是我接下来要说的事情了。

就在昨天,对的,就是昨天晚上,在@前端的那点破事分享《使用css sprites来优化你的网站在Retina屏幕下显示》一文时,@耗子姐姐告诉我qq.com使用了一种新技术,实现Retina屏幕下图像的显示方法,还特别给我截取了一段代码:

.soso .logo .qqlogo {
  display: block;
  width: 134px;
  height: 44px;
  background-image: url(//mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png);
  background-image: -webkit-image-set(url(//mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x,url(//mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x);
  background-repeat: no-repeat;
}
  

这段代码让我吃惊了,真心佩服大公司前端开发人员的本事,膜拜呀。奉承的话不多说,我们一起先来看看qq.com使用的方法吧。

打开qq.com页面,在其logo的地方使用Firebug查看其源码(这个大家都懂的):

ima</body></html>

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部