Użyj obrazów WebP na stronie internetowej

Question

Chcę spróbować użyć obrazów w formacie WebP jako obrazów tła na moich stronach internetowych. Ale nie jestem pewien, jak sprawić, aby stan w CSS, jeśli przeglądarka nie obsługuje formatu WebP, więc w tym przypadku użyj klasycznego obrazu jpg. znajdę ten kod przykładowy, Pączek to nie działa

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

Answer 1

Musisz użyć modernizr wykryć czy przeglądarka WebP wsparcia lub nie, a następnie zastosować odpowiedni styl do niego

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

} 

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

}