css - 如何检测CSS是否支持webp图像

如何在CSS中检测是否支持webp图像？

.home-banner-background {
     background-image: url('img/banner.jpg');
 }
 /*Here is an if statement that will check if webp is supported*/ {
        .home-banner-background {
            background-image: url('img/banner.webp');
        }
}

是否有一个“if”语句可以做到这一点？

最佳答案

您可以使用Modernizr。它是一种检测
用户浏览器上的可用功能。这只是要添加到您的网站中的脚本，并可以使用它编写如下内容:

.no-webp .home-banner-background {
     background-image: url('img/banner.jpg');
 }

.webp .home-banner-background {
     background-image: url('img/banner.webp');
}

关于css - 如何检测CSS是否支持webp图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57359223/