css函数之-webkit-image-set

[chenxiaochun]

一种非常简单的，根据用户分辨率显示匹配的背景图片语法，直接看示例代码：

<div class="chat"></div>

.chat{
    width: 64px;
    height: 64px;
    background-image: 
        -webkit-image-set(
            url(http://img10.360buyimg.com/uba/jfs/t5707/365/1158255807/1895/329457d4/59240e76N267f7463.png) 1x,
            url(http://img13.360buyimg.com/uba/jfs/t5611/202/1160227732/3765/ae72281a/59240dacN3f1a8d77.png) 2x
    );
    background-repeat: no-repat;
    background-size: 100% 100%;
}

各位应该注意到，我用了一个全新的css函数：-webkit-image-set，它后面写了两组背景图片url和相应的设备相素比。只需要如此简单的语法，浏览器就会知道在相应的设备像素比中下载显示不同的背景图片了。

为了照顾浏览器兼容性，我们就只能用下面这种渐近增强的写法，在不支持的浏览器上它会自动忽略-webkit-image-set：

.chat{
    width: 64px;
    height: 64px;
    background-image: url(http://img10.360buyimg.com/uba/jfs/t5707/365/1158255807/1895/329457d4/59240e76N267f7463.png);
    background-image: 
        -webkit-image-set(
            url(http://img10.360buyimg.com/uba/jfs/t5707/365/1158255807/1895/329457d4/59240e76N267f7463.png) 1x,
            url(http://img13.360buyimg.com/uba/jfs/t5611/202/1160227732/3765/ae72281a/59240dacN3f1a8d77.png) 2x
        );
    background-repeat: no-repat;
    background-size: 100% 100%;
}

• codepen示例
• 参考链接：https://coderwall.com/p/6ltcnw/high-resolution-images-in-webkit-using-image-set-function