WebP-Bilder auf der Website verwenden

Question

Ich möchte versuchen, Bilder im WebP-Format als Hintergrundbilder auf meinen Webseiten zu verwenden. Aber ich bin mir nicht sicher, wie ich eine Bedingung in CSS erstellen kann, dass, falls der Browser das WebP-Format nicht unterstützt, in diesem Fall ein klassisches jpg-Bild verwendet wird. Ich habe diesen Beispielcode gefunden, aber es funktioniert nicht

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

Answer 1

Sie müssen modernizr verwenden, um zu erkennen, ob der Browser Webp unterstützt oder nicht, und dann den entsprechenden Stil darauf anwenden

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

}

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

}