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

最新推荐文章于 2025-10-28 15:45:00 发布

原创最新推荐文章于 2025-10-28 15:45:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

移动开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种利用CSS4的image-set属性来实现Retina屏幕下图片的高清显示的方法。通过设置不同分辨率的图片资源，确保了在各种设备上都能获得清晰的视觉效果。

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时代