关于retina视网膜显示的知识总结

最新推荐文章于 2024-10-12 15:51:19 发布

编程之上

最新推荐文章于 2024-10-12 15:51:19 发布

阅读量1.3k

点赞数 1

分类专栏：移动开发

本文链接：https://blog.youkuaiyun.com/ruizhengyun/article/details/45334023

版权

移动开发专栏收录该内容

9 篇文章

订阅专栏

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

// 淘宝retina视网膜显示，css4图片新写法
.image{
        background: url(//img.alicdn.com/tps/i3/TB148SbHXXXXXcfXpXXyTkXLpXX-500-444.png);
        background-image: -webkit-image-set(url(//img.alicdn.com/tps/i3/TB148SbHXXXXXcfXpXXyTkXLpXX-500-444.png) 1x,url(//img.alicdn.com/tps/i4/TB1nIyfHXXXXXbCXXXXsH1j1pXX-1000-888.png) 2x);
        background-image: -moz-image-set(url(//img.alicdn.com/tps/i3/TB148SbHXXXXXcfXpXXyTkXLpXX-500-444.png) 1x,url(//img.alicdn.com/tps/i4/TB1nIyfHXXXXXbCXXXXsH1j1pXX-1000-888.png) 2x);
        background-image: -ms-image-set(url(//img.alicdn.com/tps/i3/TB148SbHXXXXXcfXpXXyTkXLpXX-500-444.png) 1x,url(//img.alicdn.com/tps/i4/TB1nIyfHXXXXXbCXXXXsH1j1pXX-1000-888.png) 2x);
        background-image: -o-image-set(url(//img.alicdn.com/tps/i3/TB148SbHXXXXXcfXpXXyTkXLpXX-500-444.png) 1x,url(//img.alicdn.com/tps/i4/TB1nIyfHXXXXXbCXXXXsH1j1pXX-1000-888.png) 2x);
        background-repeat: no-repeat;
        _background-image: url(//img.alicdn.com/tps/i2/TB1dpR8HXXXXXa2XVXXyTkXLpXX-500-444.png);
    }

走向视网膜（Retina）的Web时代