在网站上使用WebP图片

Question

在网站上使用WebP图片

6

我希望在网页中使用WebP格式的图片作为背景图片。但是我不确定如何在CSS中设置条件，如果浏览器不支持WebP格式，则使用经典的jpg图片。

我找到了这个示例代码，但它不起作用。

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

- Petr Šrámek

以上CSS是CSS4中的功能，浏览器支持情况未知。http://www.w3.org/TR/css4-images/#image-fallbacks - Dennis C

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Soheil Ghahremani · Accepted Answer

8

您必须使用modernizr来检测浏览器是否支持webp格式，然后应用相应的样式。

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

}

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

}

- Soheil Ghahremani

9

现在是2016年！CSS3仍然只有这种方式吗？ - Gaurav Agarwal

如果有人想将webp图像用作background-image css，我今天发现了一个支持。以下是代码。

// 输入
.banner{
    background: url(/img/bannerbg.jpg) no-repeat center;
}
 
// 输出
.banner{
    background: url(/img/bannerbg.jpg) no-repeat center;
}
@supports (-webkit-appearance:none){
    .banner {
        background-image: url(/img/bannerbg.webp);
    }
}

- Harden Rahul

@HardenRahul Firefox跟随Microsoft Edge的做法：添加了-webkit-前缀。 - Andrei Krasutski

@HardenRahul，但是在Safari中不起作用。 - Vince