css - 如何在 Chrome 中显示 .webp 而在 Firefox 或 IE/Edge 中显示 .jpg？

Question

是否有任何工作示例可以在 Chrome 中显示 .webp 格式文件，在 Firefox 和 IE/Edge 中显示不同的 .jpg 格式文件？

我现在使用这个 CSS 代码:

#bgbox {
    background-imgage: url('../img/bg.webp');
}

是否有 -moz-background-image 或类似的东西？

Answer 1

最简单的方法是使用 <picture> 元素并设置一个 webp来源 jpg倒退。您可以有多个来源，浏览器将尝试加载第一个兼容的来源，或者如果没有工作则使用回退。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" />
</picture>

如果您需要设置背景，则需要采用不同的方法。您可以使用 Modernizr检测浏览器是否支持webp并基于此应用不同的样式。

.image {
  background-size: cover;
  width: 100px;
  height: 100px;
}

.no-webp .image {
  background-image: url('https://www.gstatic.com/webp/gallery/4.jpg');
}

.webp .image {
  background-image: url('http://www.gstatic.com/webp/gallery/4.webp');
}

<script src="https://cdn.jsdelivr.net/modernizr/3.3.1/modernizr.min.js"></script>
<div class="image"></div>