图片相关问题记录

1. cross-fade() 半透明图片

cross-fade() 可以混合两个或多个图像，并按比例混合它们的不同部分。这个函数的语法如下：

兼容性：chrome和safari, firefox不支持

cross-fade(<image1> [, <image2>] [, <percentage>])

/*图片半透明带颜色*/
background-image: -webkit-cross-fade(url("aa.jpg"), linear-gradient(#ef475d, #ef475d), 50%);

/*图片半透明*/
background-image: -webkit-cross-fade(url("bb.png"), linear-gradient(transparent, 0 0), 60%);

/*多个渐变色混合*/
background-image: -webkit-cross-fade(linear-gradient(#ef475d, #ef475d), linear-gradient(transparent, transparent), 30%);

2. 图片同时返回宽高

要求后台除了url，还返回width和height，这样可以保证图片占位，不会出现尺寸跳动问题

img: {url, width, height}

3. 图片加载失败使用error事件处理

图片加载失败，可以使用error事件来处理错误，跳转兜底图。
error事件不支持冒泡，可在捕获阶段全局拦截。
不用兜底图，可以添加class，使用css伪元素来显示灰图和loading图。

4. image-set()，srcset 支持不同分辨率图片

<img src="128px.jpg"
     srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px" />

image-set(url("image1.jpg") 1x, url("image2.jpg") 2x); 
image-set(linear-gradient(blue, white) 1x, linear-gradient(blue, green) 2x);