javascript - WEBP 图片回退

Question

我在互联网上搜索了很多，但在网上找不到合适的例子或完整的教程，可以完整教授。所以大家请给我一些好的例子。

我已经在很多地方或网站上尝试过 WEBP 代码，例如与 modernizer 一起使用、检查浏览器支持或使用背景图像。

Answer 1

有一篇关于 stucox 的文章，您可以在其中找到一些使用带有 modernizr 和后备图像的 webp 图像的示例。这应该可以解决您的问题。

/* Result pending */
.js .container {
   background-image: none;
}
/* No JS / WebP not supported */
   .no-js .container,
   .js.no-webp .container {
   background-image: url('image.jpg');
}
/* WebP supported */
   .js.webp .container {
   background-image: url('image.webp');
}

http://www.stucox.com/blog/using-webp-with-modernizr/