如何在Chrome和IE/Edge中顯示.webp和Firefox中的.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>