css - 在网站上使用 WebP 图片

Question

我想尝试在我的网页上使用 WebP 格式的图像作为背景图像。但我不确定，如果浏览器不支持 WebP 格式，那么如何在 CSS 中设置条件，所以在这种情况下使用经典的 jpg 图像。我找到了这个示例代码，但它不起作用

.mybackgroundimage {
    background-image: url("image.jpg");
    background-image: image("image.webp" format('webp'), "image.jpg");
}

Answer 1

您必须使用modernizr来检测浏览器是否支持webp，然后对其应用适当的样式

.no-webp .mybackgroundimage 
{
background: url('image.jpg') no-repeat;

}

.webp .mybackgroundimage
{
background: url('image.webp') no-repeat;

}