在網站上使用WebP圖像

我想嘗試使用WebP格式的圖像作爲網頁上的背景圖像。但我不確定，如何使CSS中的條件，如果瀏覽器不支持WebP格式，所以在這種情況下，使用經典的JPG圖像。我覺得這個例子的代碼，芽這是行不通的在網站上使用WebP圖像

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

來源

2013-04-27 Petr Šrámek

以上CSS是功能在CSS4中哪些瀏覽器支持是未知的。 http://www.w3.org/TR/css4-images/#image-fallbacks – 2013-09-24 09:11:37

必須使用modernizr檢測是否瀏覽器支持WEBP與否，然後應用適當的樣式，

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

} 

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

}

來源

2013-04-27 11:07:34

它的2016年！這仍然是CSS3中唯一的方法嗎？ – 2016-02-18 22:27:54

如果任何改變任何人想要使用webp圖像作爲背景圖像的CSS有我今天發現的支持。這是代碼。 //輸入 .banner {背景：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）; } } – 2017-10-26 07:14:49

@HardenRahul Firefox遵循Microsoft Edge：增加了「-webkit」前綴 – 2017-10-28 19:13:55

在網站上使用WebP圖像

回答

相關問題